webpack配置

一.创建webpack.config.js （ loader webpack中一个核心，将ES6转为Es5 将scss，jsx ,vue文件转成js文件等等 ）
const path=require(“path”)
module exports={
entry：“./src/main.js”,入口文件
output:{
path:“path.resolve(__dirname,“dist”)”,动态获取路径
filename：“bundle.js”，
publicPath:“dist/” 为了在url路径前加dist ，发布时不需要
}，
module:{
rules:[
1. //css处理 ； //使用多个loader时，是从右向左执行的，css-loader只负责将css加载，要显示样式还需要安装style-loader
{test:/.cssKaTeX parse error: Expected 'EOF', got '}' at position 64: …ader"] }̲， 2. //l…/,匹配所有的less
use:[{loader:“style-loader”},{loader:“css-loader”},{loader:“less-loader”}] }，
3.//Es6处理 （安装：npm install --save-dev babel-loader@7 babel-core babel-preset-es2015 与官网不太一样）
{ test：/.jsKaTeX parse error: Expected 'EOF', got '}' at position 139: …} } }̲ 4. //url-lo…",
use:[{loader：url-loader,options:{limit:8192,name:“img/[name].[hash:8].[ext]”}}]注：当加载的图片小于limit时，会图片编译成base64字符串的形式，
如果大于limit，需要安装file-loader;name配置为了使打包后的名字以打包前的名字在img文件夹下
}
]},
//插件的配置
plugins:[new webpack.BannerPlugin(“最终版权归……所有”), ]（需要引入require（webpack） ）
}
一.webpack中Vue的配置
1.安装Vue npm install vue --save 不是开发时依赖，因为后续是在实际项目中也会使用Vue的
2.main.js中引入Vue import Vue from “vue”
new Vue({el:"#app",data:{meaasge}})
扩展：
runtime-only->使用这种时，不可以有任何的template
runtime-compiler->版本的代码中，可以有template，因为有compiler可以用于变异template
当出现using the runtime-only的错误时 解决方案：在webpack中与module同级配置 resolve：{
extensions:[".js",".css",".vue"]
alias:{“vueKaTeX parse error: Expected 'EOF', got '}' at position 24: …ist/vue.esm.js”}̲ } 3.vue编译…/,use:[“vue-loader”]}
此时会报“Vue-loader was used without the corresponding plugin”解决方案：修改Vue-loader的版本13.0.0后重新npm install
二.html打包
1.安装：npm install html-webpack-plugin --save-dev
2.webpack.config.js中引入：const HtmlWebpackPlugin=require（“html-webpack-plugin”）
3.plugins中配置 ：plugins：[new HtmlWebpackPlugin({template:“index.html”})]
三.js压缩的plugin
1.安装：npm install [email protected] --save-dev
2.webpack中引入 const UglifyjsWebpackplugin=require（uglifyjs-webpack-plugin）//一般开发阶段不需要
3.plugins中配置：plugins:[new UglifyjsWebpackplugin()]
四.webpack-dev-server搭建本地服务器（开发阶段需要，打包阶段不需要）
1.安装：npm install [email protected] --save-dev
2.webpack.config.js中与module同级配置devServer:{contentBase:"./dist",inline:“true”}
3.package.json中的script中配置：“dev”:“webpack-dev-server --open” 可以直接使用npm run dev自动启动服务
五.webpack配置的分离（根据开发依赖和发布依赖的不同配置进行分离）
1.新建一个base.config.js 将上述配置的开发依赖和发布依赖的代码放在此文件中
2.新建一个prod.config.js将搭建本地服务器的配置放在此文件中
3.新建一个dev.config.js 将plugins：[new UglifyWebPackplugin（）]
4.在项目文件的根路径下运行npm install webpack-merge --save-dev
5.prod.config.js中引入
const webpackMerge=require(“webpack-merge”),
const baseConfig=require(./base.config)
module expoers=webpackMerge(baseConfig,{plugins:[new UglifyWebpackPlugin()]})
6.dev.config.js中同理
7.配置之后可以将webpack.config.js删除掉 此时运行会报错，解决方案：在package.json中script中配置
“build”:“webpack --config ./build/prod.config.js”,
“dev”:“webpack-dev-server --open --config ./build/dev.config.js”
8.此时执行npm run build 打包，打包后的文件会在build中，此时将webpack中的出口文件中的dist配置路径为…/dist