当前使用的版本: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 ] } };