本项目是webpack 的配置解释说明，以备查阅，
一、webpack webpack-cli -D本地安装，开发依赖
二、新建src/index.js 执行npx webpack webpack会自动优化并压缩优化代码，支持模块化
三、新建src/a.js 模块化导出 str变量
四、Src/index.js导入 a.js Index 执行coderun 直径可以运行
五、新建dist/index.html 文件, 执行npx webpack 打包，html中 引入 打包后的文件main.js，在浏览器中直接可以浏览结果
六、手动配置webpack , 配置文件的名字 webpack.config.js
七、配置文件是commonjs规范导出的文件, module.exports={}，
八、Mode:’develoment’ 开发环境、生产环境
九、有entry入口文件，entry:’./src/index.js’相对路径
十、Output:{ filename:’xx’, path:path.resolve(__dirname, ’dist’)}绝对路径
十一、配置npm script:{“build”:”webpack --config webpack.config.js”}字段：执行npm run build 打包
安装webpack-dev-server 开发服务 npm install webpack-dev-server -D,
Webpack.config.js配置
devServer:{
port:3000,
progress:true,
contentBase:'./dist'
}，
添加npm脚本 ‘dev’:’webpack-dev-server’,
执行 npm run dev
十二、引入html插件，新建src/index.html，再webpack配置文件中，引入html-webpack-plugin,
let HtmlWebpackPlugin = require('html-webpack-plugin');
在 plugins:[]使用插件
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html', // 使用的模板
filename: 'index.html', //打包出来的模板名字
minify: {
removeAttributeQuotes: true// 删除模板中的双引号
},
hash:true//可以防止缓存
})
]
配置文件中的mode字段是用来配置打包的环境的，
mode: 'production', //模式 development 开发模式, production生产环境
防止文件缓存可以增加hash的方法来实现。
十三、样式处理：解析CSS模块
在新建src/index.css 文件，并在index.js中引入require('./index.css')
如果直接npm run dev 汇报无法解析的错误，需要安装相应的loader.
Loader可以转化文件
// css-loader 解析@import语法，style-loader把css插入到header标签中
// loader的使用是有顺序的，（如果是单个loader使用是字符串，多个loader就用数组）
// 默认是从右向左、从下向上执行!!! 单个loader还可以是对象的形式，好处就是可以传其他参数
{
test: /.\.css$/,
use: [
{
loader: 'style-loader',
options: { // 这里的配置参数不同版本有差异，根据相应版本进行匹配
insert: 'head', // 这里默认是 head标签 也可以选择插入 body标签
//官方不建议修改 最好还是默认的
injectType: 'styleTag' // 默认是 style样式 插入的
// 允许设置如何将样式注入DOM
// 这样配置就不会影响到用户在style标签内配置的样式
}
},
'css-loader']
},
{
test: /.\.less$/,
use: [
{
loader: 'style-loader',
options: {
insert: 'head', // 这里默认是 head标签 也可以选择插入
//body标签 官方不建议修改 最好还是默认的
injectType: 'styleTag' // 默认是 style样式 插入的
//允许设置如何将样式注入DOM
}
},
'css-loader', // 解析@import 语法引入的css
'less-loader'// 将less转成css文件
]
},
