webpack
//webpack必须采用commonjs写法 let path = require('path'); //专门处理路径用的 console.log(path.resolve('./dist'));//根据当前路径解析出一个绝对路径[E:\GIT\webpack\dist] let HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { //把main+a打包到bundle中,再把bundle放到dist文件夹里 entry:'./src/main1.js', //打包的入口文件,webpack会自动查找相关的依赖进行打包 output:{ filename:'build.js', //打包后的名字,自定义bundle.js path:path.resolve('./dist') //必须是一个绝对路径 }, //模块的解析规则 //-js 匹配所有的js,用babel-loader转译,排除掉node_modules module:{ rules:[ {test:/\.js$/,use:'babel-loader',exclude:/node_modules/}, //匹配.js 排除node_modules {test:/\.css$/,use:['style-loader','css-loader']}, //顺序从右往左写 {test:/\.less$/,use:['style-loader','css-loader','less-loader']}, //顺序从右往左写 {test:/\.(jpg|png|gif|jpeg)$/i,use:'url-loader?limit=8192'}, //转化base64只在8192字节以下转化,其他情况输出图片 {test:/\.(eot|svg|woff|woff2|wtf)$/,use:'url-loader'} ] }, plugins:[ new HtmlWebpackPlugin({ //自动插入到dist目录中 template:'./src/index.html', //使用的模板 //filename:'login.html' //产出的名字 }) ] };
//给打包文档使用 const HtmlWebpackPlugin = require('html-webpack-plugin'); const path = require('path'); const {VueLoaderPlugin} = require('vue-loader'); module.exports = { mode:'development', devtool:'source-map', entry:path.resolve(__dirname,'main.ts'), output:{ path:path.resolve(__dirname,'../website-dist'), filename:'bundle.js' }, resolve:{ //解析模块,对应的扩展名有哪些 extensions:['.ts','.tsx','.js','.vue'] }, module:{// loader 三种写法 { } "" [] rules:[ {test:/\.vue$/,loader:'vue-loader'}, {test:/\.(ts|js)x?$/,exclude:/node_modules/,loader:'babel-loader'}, {test:/\.(svg|otf|ttf|woff|woff2|eot|gif|png)$/,loader:'url-loader'}, {test:/\.(scss|css)/,use:['style-loader','css-loader','sass-loader']} ] }, plugins:[ new VueLoaderPlugin(), new HtmlWebpackPlugin({ template:path.resolve(__dirname,'template.html') }) ] } //yarn add webpack@5.26.3 webpack-cli@4.5.0 webpack-dev-server@3.11.2 vue-loader@16.1.2 @vue/compiler-sfc@3.0.7 -D -W //yarn add babel-loader@8.2.2 @babel/core@7.13.10 @babel/preset-env@7.13.10 @babel/preset-typescript@7.13.0 url-loader@4.1.1 file-loader@6.2.0 html-webpack-plugin@5.3.1 css-loader@5.1.3 sass-loader@11.0.1 style-loader@2.0.0 sass@1.32.8 -D -W //babel-plugin-module-resolver