wepack使用
当前使用的版本：webpack 4.5。
⚠️webpack 是需要有 node 环境的，所以在使用之前需要保证你当前安装的有 node。
安装 webpack：
npm install webpack --save-dev （dev 是指的是在开发环境中使用的依赖包）
一、入门的 webpack 配置 webpack.config.js：
module.exports = {
entry: __dirname + "/app/main.js", //压缩入口
output: {
path: __dirname + "/public", //打包后的文件存放的地方
filename: "bundle.js"//打包后输出文件的文件名
},
}
⚠️需要注意的是：
1、__dirname 是 node 的全局变量，存储的是文件所在的目录
2、output 中的 path 是文件打包后的绝对路径，不是相对路径
3、执行命令的时候，如果 webpack 不是全局安装的，需要加上路径： node_models/.bin/webpack
直接执行，如果用的是 webpack 4，则会有一个提示说需要单独安装 webpack-cli。
因为在webpcak 3 中 webpack-cli 是集中在 webpack 中的，而在 webpack 4 为了方便管理维护，将 webpack-cli 分离了出来；所以在如果最初没有安装 webpack-cli 的时候，执行 webpack 命令会有提示说让用户安装 webpack-cli。
4、还有一种执行方法是 webpack 入口文件路径 打包后输出的文件路径
二、快捷执行打包任务：
package.json 添加如下内容：
"script" : {
"start": 'webpack' //无论是不是全局安装的webpack，都可以不用写 node_module/.bin/ 这个路径，npm 能自己找到
}
然后就可以使用 npm start 来代替上面的 node_module/.bin/webpack 这个繁琐的命令了
⚠️start （test也是）是个特殊的命令，通过 npm start 就可以找到对应的命令进行执行，如果不是 start 命令则需要使用：npm run scriptName
"scripts": {
"error": "echo \"Error: no test specified\" && exit 1"
}
test 命令需要这样执行： npm run error
他的执行结果就是输出一个错误：
三、source maps的设置，devtool选项
1、source-map 单独文件生成，功能完整，但是打包速度过慢
2、cheap-module-source-map 单独文件生成，不带映射，只能对应行，不能对应列，不便调试
3、eval-source-map 在同一个文件中生成干净完整的source-map，但是有完全问题；开发阶段首选
4、cheap-module-eval-source-map 速度最快，没有映射，缺点同3
使用，在wapack的配置中添加 devtool 即可：
module.exports = {
devtool: 'eval-source-map',
entry: __dirname + "/app/main.js",
output: {
path: __dirname + "/public",
filename: "bundle.js"
}
}
四、浏览器监听代码修改，并自动刷新---webpack服务器：webpack-dev-server
安装该插件：npm install webpack-dev-server --save-dev
devServer 配置：
1、contentBase：服务器从哪里获取内容。默认为根目录，如果是其他目录的话，进行修改即可，建议使用绝对路径；可以从多个目录获取，用数组即可
2、port：监听哪个端口的请求，默认为 8080
3、inline：为 true 时则会进行热替换
4、historyApiFallback：使用 HTML5 History Api 时使用，如果设置为 true 则表示不跳转
使用：
module.exports = {
devtool: 'eval-source-map',
entry: __dirname + "/app/main.js",
output: {
path: __dirname + "/public",
filename: "bundle.js"
},
devServer: {
contentBase: path.join(__dirname, "public"),//本地服务器所加载的页面所在的目录
historyApiFallback: true,//不跳转
inline: true//实时刷新
}
}
同时需要在 package.json 的 scripts 对象中添加
"scripts": {
"server": "webpack-dev-server --open"
}
执行 npm run server 命令就可以看到效果，这时修改文件，页面内容实时更新则说明配置成功
五：Loader
1、用于对模块的源代码进行转换
2、可以使你在 import 或"加载"模块时预处理文件
3、可以将文件从不同的语言（如 TypeScript）转换为 JavaScript
4、将内联图像转换为 data URL
5、他甚至允许你直接在 JavaScript 模块中 import CSS文件
如果要使用 loader 则需要安装对应的 loader
npm install css-loader --save-dev 告诉 webpack 加载 css
npm install js-loader --save-dev 将 TypeScript 转化成 js
然后在 webpack.config.js 中配置 module 对象
module.exports = {
module: {
rules: [
{ test: /\.css$/, use: 'css-loader' }, // 给每个 css 文件使用 css-loader
{ test: /\.ts$/, use: 'ts-loader' } // 给每个 ts 文件使用 ts-loader
]
}
};
