安装
npm init -y //目录下产生package.json文件
npm install webpack webpack-cli --save-dev
常见的project下有src目录和dist目录，src表示源，常用来放编译前的原始代码，dist表示分布，放编译后的代码，用于生产站点。
起步
假如我们的project目录如下
webpack-demo
|- package.json
|- /dist
|- index.html
|- /src
|- index.js
在index.js中引用了某个包，此时执行npx webpack，会将我们的脚本 src/index.js 作为入口起点，也会生成 dist/main.js 作为输出。此时dist中的index.html只引入main.js就能正常使用。
创建一个配置文件webpack.config.js
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
filename: 'main.js',
path: path.resolve(__dirname, 'dist')
}};
再通过新的配置文件再次执行构建：
npx webpack --config webpack.config.js
如果 webpack.config.js 存在，则 webpack 命令将默认选择使用它。我们在这里使用 --config 选项只是向你表明，可以传递任何名称的配置文件。这对于需要拆分成多个文件的复杂配置是非常有用。
考虑到用CLI方式运行本地webpack副本不是特别方便，我们可以在package.json的script中添加命令来代替我们之前使用的npx命令
{
"name": "webpack-demo",
"version": "1.0.0",
"description": "",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
+ "build": "webpack" //npx webpack
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"webpack": "^4.20.2",
"webpack-cli": "^3.1.2"
},
"dependencies": {
"lodash": "^4.17.5"
}
}
管理资源
webpack也可以管理其他资源例如css、images
加载CSS
为了在 JavaScript 模块中 import 一个 CSS 文件，你需要安装 style-loader 和 css-loader，并在 module 配置 中添加这些 loader：
npm install --save-dev style-loader css-loader
webpack.config.js
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
},
+ module: {
+ rules: [
+ {
+ test: /\.css$/,
+ use: [
+ 'style-loader',
+ 'css-loader'
+ ]
+ }
+ ]
+ }
};
此时在src中添加css文件，并引入到index.js中，打包后css内容会出现在最终页面的head标签内。
现有的 loader 可以支持任何你可以想到的 CSS 风格 - postcss, sass 和 less 等
加载images
类似css，先安装，再配置module
npm install --save-dev file-loader
在配置文件的module下rules加
+ {
+ test: /\.(png|svg|jpg|gif)$/,
+ use: [
+ 'file-loader'
+ ]
+ }
同理，src下添加图片，index.js中引用，css文件中使用，构建并打开最终文件，图片就正常显示了
加载 fonts 字体
file-loader 和 url-loader 可以接收并加载任何文件，然后将其输出到构建目录。这就是说，我们可以将它们用于任何类型的文件，也包括字体。因此我们只需更新配置文件：
+ {
+ test: /\.(woff|woff2|eot|ttf|otf)$/,
+ use: [
+ 'file-loader'
+ ]
+ }
加载数据
加载的有用资源还有数据，如 JSON 文件，CSV、TSV 和 XML。类似于 NodeJS，JSON 支持实际上是内置的，也就是说 import Data from './data.json' 默认将正常运行。
要导入 CSV、TSV 和 XML，你可以使用 csv-loader 和 xml-loader
npm install --save-dev csv-loader xml-loader
配置：
+ {
+ test: /\.(csv|tsv)$/,
+ use: [
+ 'csv-loader'
+ ]
+ },
+ {
+ test: /\.xml$/,
+ use: [
+ 'xml-loader'
+ ]
+ }
管理输出
当我们需要分包，就需要输出不止一个js文件，因此修改配置文件：
const path = require('path');
module.exports = {
+ entry: {
+ app: './src/index.js',
+ print: './src/print.js'
+ },
output: {
+ filename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist')
}
};
这样打包后会产生print.bundle.js和app.bundle.js两个文件，如果手动修改index.html中的引用，就是正常显示，也可以用htmlWebpackPlugin来帮助解决
具体方法：安装插件
npm install --save-dev html-webpack-plugin
修改配置文件
const path = require('path');
+ const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: {
app: './src/index.js',
print: './src/print.js'
},
+ plugins: [
+ new HtmlWebpackPlugin({
+ title: '管理输出'
+ })
+ ],
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist')
}
};
这样在编译之后插件会创建一个全新的index.html并替换我们的原有文件
清理/dist文件夹
推荐做法是每次编译前清理这个文件夹，这样只会生成用到的文件。可以用clean-webpack-plugin这个插件：
npm install --save-dev clean-webpack-plugin
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
+ const CleanWebpackPlugin = require('clean-webpack-plugin');
module.exports = {
entry: {
app: './src/index.js',
print: './src/print.js'
},
plugins: [
+ new CleanWebpackPlugin(),
new HtmlWebpackPlugin({
title: '管理输出'
})
],
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist')
}
};
你可能会很感兴趣，webpack 和 webpack 插件似乎“知道”应该哪些文件生成。答案是，webpack 通过 manifest，可以追踪所有模块到输出 bundle 之间的映射。
如果你想要知道如何以其他方式来控制 webpack 输出，了解 manifest 是个好的开始。
通过 WebpackManifestPlugin 插件，可以将 manifest 数据提取为一个容易使用的 json 文件。
开发/调试
source map定位
webpack打包源码后，我们有可能很难追踪到错误和警告在源码中的位置。
使用source map就可以准确定位了，它会将编译后的代码映射回原始代码。它有很多不同的选项可以使用，可以根据需要进行配置。
开发工具
我们在开发调试的过程中经常需要编译代码，每次手动输入npm run build太麻烦，webpack提供了几个选项，帮助我们在代码变化后自动编译：
- 观察模式watch
在package.json的script中加入"watch": "webpack --watch"，即可在命令行中npm run watch观察代码，改动后需要手动刷新浏览器
- webpack-dev-server
npm install --save-dev webpack-dev-server
在webpack.config.js的module.exports中添加
devServer: {
contentBase: './dist'
}
以上配置告知webpack-dev-server，在localhost:8080下建立服务，将dist下的文件，作为可访问文件。
依然在scripts中添加命令"start": "webpack-dev-server --open"，在命令行中运行 npm start，就会看到浏览器自动加载页面。如果现在修改和保存任意源文件，web 服务器就会自动重新加载编译后的代码
webpack-dev-server的其他设置可以在这里看到
- webpack-dev-middleware
webpack-dev-middleware因为笔者没用过这个，就只放链接供大家参考=。=
网友评论