npm 5.2 以上的版本中提供了一个npx命令
npx 想要解决的主要问题，就是调用项目内部安装的模块，原理就是在node_modules下的.bin 目录中找到对应的命令执行
使用webpack命令：npx webpack
1.安装
全局安装
npm install webpack webpack-cli -g
项目中安装
npm install webpack webpack-cli -D
3.webpack 配置
webpack 有四大核心概念
1.入口(entry) :程序的入口js
2.输出(output):打包好存放的位置
3.loader:用于对模块的源代码进行转换
4.插件(plugins):插件的目的在于解决 loader 无法实现的其他事
（1）配置 webpack.cofig.js
（2）运行 npx webpack
// webpack.cofig.js
const path = require('path')
module.exports ={
// 入口文件配置
entry:'./src/main.js',
// 出口文件配置，出口文件的 path 地址必须是绝对路径
output:{
// path.resolve 解析当前相对路径的绝对路径，或者使用 path.join(__dirname,'./dist')
path:path.resolve('./dist'),
// 输出文件名字
filename:'bundle.js'
},
// 默认为 production，可以手动设置为 development。区别就是是否进行压缩混淆，
mode:'development',
//开启监视模式，此时执行 webpack 指令进行打包会监视文件变化
watch:true
}可以使用 npx webpack --config 指定配置文件
npx webpack --config webpack.cunstom.config.js
或者在 package.json 文件中配置
// package.json
"scripts": {
"build": "npx webpack --config webpack.cunstom.config.js",
}4.开发自动编译工具
每次要编译代码时，要手动运行 npm run build 会变得很麻烦
webpack 有几个不同的选项，可以帮你在代码发生变化后自动编译代码。
1. webpack's Watch Mode
方法一：在 webpack 指令后面加上 --watch 参数即可
主要的作用就是监视本地项目文件的变化，发现有修改的代码会自动编译打包，生成输出文件
（1）配置 package.json 的 scripts "watch":"webpack --watch"
(2) 运行 npm run watch
以上是 cli 的方式设置watch 的参数
方法二：通过配置文件对 watch 的参数进行修改
// webpack.config.js module.exports = { watch:true }2. webpack-dev-server (多数场景可能使用)
方法一：
1.安装 devServer
devServer 需要依赖 webpack, 必须在项目中安装webpack
npm i webpack-dev-server webpack -D2.index.html 中修改 <script src="/bundle.js"></script>
3. 运行：npx webpack-dev-server
4. 运行：npx webpack-dev-server --hot --open --port 8090
5. 配置 package.json 的 scripts : "dev":"webpack-dev-server --compress --hot --open --port 8090 --contentBase src"
6. 运行：npm run dev
devServer 会在内存中生成一个打包好的 bundle.js ,专供开发时使用，打包效率高，修改代码后会自动重新打包，以及刷新浏览器，用户体验非常好。
上是 cli 的方式设置 devServer 的参数
方法二：通过配置文件对 devServer 的参数进行修改
// webpack.config.js module.exports = { // 入口文件配置 entry:'./src/main.js', // 出口文件配置，出口文件的 path 地址必须是绝对路径 output:{ // path.resolve 解析当前相对路径的绝对路径，或者使用 path.join(__dirname,'./dist') path:path.resolve('./dist'), // 输出文件名字 filename:'bundle.js' }, // 默认为 production devServer:{ open:true, hot:true, compress:true, port:3000 } } // 修改 package.json 中的 scripts:"dev":"webpack-dev-server" // 运行 npm run dev3. webpack-dev-middleware
webpack-dev-middleware 是一个容器（wrapper），它可以把 webpack 处理后的文件传递给一个服务器（server）,webpack-dev-server 在内部使用了它，同时，它也可以作为一个单独的包来使用，以便进行更多自定义设置来实现更多的需求。
1. 安装 express 和 webpack-dev-middleware
npm i express webpack-dev-middleware - D2.新建server.js
const express = require('express'); const webpack = require('webpack'); const webpackDevMiddleware = require('webpack-dev-middleware'); const app = express(); const compiler = webpack(config); app.use( webpackDevMiddleware(compiler, { publicPath:'/', }) ); // 将文件 serve 到 port 3000。 app.listen(3000, function () { console.log('Example app listening on port 3000!\n'); });3.配置package.json 中的 scripts:"server":"node server.js"
4. 运行：npm run server
注意：如果要使用middleware，必须使用 html-webpack-plugin 插件，否则 html 文件无法正确的输出到 express 服务器的根目录
小结：只有在开发时才需要使用自动编译工具，例如：webpack-dev-server
项目上线时都会直接使用webpack进行打包构建，不需要使用这些自动编译工具
自动编译工具只是为了提高开发体验。
4.1 html 插件
1.安装 html-webpack-plugin 插件 npm i html-webpack-plugin -D
2. 在webpack.config.js 中的 plugins 节点下配置
const HtmlWebpackPlugin = require('html-webpack-plugin')
plugins:[
new HtmlWebpackPlugin({
filename:'index.html',
template:'template.html'
})
]devServer 时根据模板在 express 项目根目录下生成 html 文件(类似与devServer 生成内存中bundle.js)
devServer 时自动引入 bundle.js
打包时会自动生成 index.html 文件
4.2 处理css
1.安装 css-loader style-loader
npm i css-loader style-loader -D
2.配置 webpack.config.js
module:{ rules:{ // 配置的是用来解析.css文件的loader(style-loader和css-loader) { // 用正则匹配当前访问的文件的后缀名是 .css test: /\.css$/, use: ['style-loader', 'css-loader'] // webpack底层调用这些包的顺序是从右到左 } } }loader的释义:
- css-loader: 解析css文件
- style-loader: 将解析出来的结果 放到html中, 使其生效
4.3 处理less 和 sass
npm i less less-loader sass-loader node-sass -D
module: { rules: [ // 配置的是用来解析.css文件的loader(style-loader和css-loader) { test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] }, { test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'] } ] }
4.4处理图片和字体
npm i file-loader url-loader -Dmodule: { rules: [ { test: /\.(png|jpg|gif)/, use: [{ loader: 'url-loader', options: { // limit表示如果图片大于5KB，就以路径形式展示，小于的话就用base64格式展示 limit: 5 * 1024, // 打包输出目录 outputPath: 'images', // 打包输出图片名称 name: '[name]-[hash:4].[ext]' } }] } ] }
4.5 babel
npm i babel-loader @babel/core @babel/preset-env webpack -D如果需要支持更高级的ES6语法, 可以继续安装插件:
npm i @babel/plugin-proposal-class-properties -D也可以根据需要在babel官网找插件进行安装
module: { rules: [ { test: /\.js$/, use: { loader: 'babel-loader', options: { presets: ['@babel/env'], plugins: ['@babel/plugin-proposal-class-properties'] } }, exclude: /node_modules/ } ] }官方更建议的做法是在项目根目录下新建一个
.babelrc的babel配置文件//.babelrc { "presets": ["@babel/env"], "plugins": ["@babel/plugin-proposal-class-properties"] }如果需要使用
generator，无法直接使用babel进行转换，因为会将generator转换为一个regeneratorRuntime，然后使用mark和wrap来实现generator但由于babel并没有内置
regeneratorRuntime，所以无法直接使用需要安装插件:
npm i @babel/plugin-transform-runtime -D同时还需安装运行时依赖:
npm i @babel/runtime -D在
.babelrc中添加插件://.babelrc { "presets": [ "@babel/env" ], "plugins": [ "@babel/plugin-proposal-class-properties", "@babel/plugin-transform-runtime" ] }如果需要使用ES6/7中对象原型提供的新方法，babel默认情况无法转换，即使用了
transform-runtime的插件也不支持转换原型上的方法需要使用另一个模块:
npm i @babel/polyfill -S该模块需要在使用新方法的地方直接引入:
import '@babel/polyfill'
4.6 source map的使用
devtool
此选项控制是否生成，以及如何生成 source map。
使用 SourceMapDevToolPlugin 进行更细粒度的配置。查看 source-map-loader 来处理已有的 source map。
开发环境推荐：
cheap-module-eval-source-map
生产环境推荐：
none(不使用source map)
原因如下：
- 使用 cheap 模式可以大幅提高 soure map 生成的效率。大部分情况我们调试并不关心列信息，而且就算 source map 没有列，有些浏览器引擎（例如 v8） 也会给出列信息。
- 使用 module 可支持 babel 这种预编译工具，映射转换前的代码。
- 使用 eval 方式可大幅提高持续构建效率。官方文档提供的速度对比表格可以看到 eval 模式的重新构建速度都很快。
- 使用 eval-source-map 模式可以减少网络请求。这种模式开启 DataUrl 本身包含完整 sourcemap 信息，并不需要像 sourceURL 那样，浏览器需要发送一个完整请求去获取 sourcemap 文件，这会略微提高点效率。而生产环境中则不宜用 eval，这样会让文件变得极大。
5.插件
5.1 clean-webpack-plugin
该插件在
npm run build时自动清除dist目录后重新生成，非常方便1.安装插件
npm i clean-webpack-plugin -D
2.引入插件
const CleanWebpackPlugin = require('clean-webpack-plugin')3.使用插件, 在plugins中直接创建对象即可
plugins: [ new CleanWebpackPlugin() ],
5.2 copy-webpack-plugin
1.安装插件
npm i copy-webpack-plugin -D
2.引入插件
const CopyWebpackPlugin = require('copy-webpack-plugin')3.使用插件, 在plugins中插件对象并配置源和目标
from: 源, 从哪里拷贝, 可以是相对路径或绝对路径, 推荐绝对路径
to: 目标, 拷贝到哪里去, 相对于
output的路径, 同样可以相对路径或绝对路径, 但更推荐相对路径(直接算相对dist目录即可)plugins: [ new HtmlWebpackPlugin({ filename: 'index.html', template: './src/index.html' }), new CleanWebpackPlugin(), new CopyWebpackPlugin([ { from: path.join(__dirname, 'assets'), to: 'assets' } ]) ],
5.3 BannerPlugin
这是一个webpack的内置插件，用于给打包的JS文件加上版权注释信息
1.引入webpack
const webpack = require('webpack')2.创建插件对象
plugins: [ new HtmlWebpackPlugin({ filename: 'index.html', template: './src/index.html' }), new CleanWebpackPlugin(), new CopyWebpackPlugin([ { from: path.join(__dirname, 'assets'), to: 'assets' } ]), new webpack.BannerPlugin('黑马程序员牛逼!') ],
471
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
