1.安装： npm install --save-dev webpack npm install --save-dev webpack@<version>
如果是webpack 4+ ,安装 CLI npm install --save-dev webpack-cli 。
2.创建demo
mkdir webpack-demo && cd webpack-demo npm init -y npm install webpack webpack-cli --save-dev
3.调整安装包为私有，移除main接口，需在package.json里面修改，增加private，去掉main。
{ "name": "webpack-demo", "version": "1.0.0", "description": "", + "private": true, - "main": "index.js", "scripts": { "test": "echo "Error: no test specified" && exit 1" }, "keywords": [], "author": "", "license": "ISC", "devDependencies": { "webpack": "^4.0.1", "webpack-cli": "^2.0.9" }, "dependencies": {} }
4.创建一个 bundle 文件，在该文件夹下新建src/index.js, dist/index.html
然后安装lodash npm install --save lodash ,新建文件内容如下，命令行输入npx webpack。在浏览器中打开 index.html，页面会出现在index.js加的内容。总结 ：执行 npx webpack，会将我们的脚本作为入口起点，然后 输出 为 main.js。这个时候查看dist文件夹，会看到文件多出了一个main.js
注：安装一个要打包到生产环境的安装包时，使用 npm install --save，安装一个用于开发环境的安装包（例如，linter, 测试库等），应该使用 npm install --save-dev。
<!doctype html> <html> <head> <title></title> </head> <body> + <script src="main.js"></script> </body> </html>
index.js
+ import _ from 'lodash'; + function component() { var element = document.createElement('div'); element.innerHTML = _.join(['Hello', 'webpack'], ' '); return element; } document.body.appendChild(component());
5.使用配置文件，在该文件夹下新建webpack.config.js，配置如下，再次执行构建：npx webpack。
如果 webpack.config.js 存在，则 webpack 命令将默认选择使用它。可以使用 --config 传递任何名称的配置文件，这对于需要拆分成多个文件的复杂配置是非常有用。比如npx webpack --config webpack.config.js。
比起 CLI 这种简单直接的使用方式，配置文件具有更多的灵活性。我们可以通过配置方式指定 loader 规则(loader rules)、插件(plugins)、解析选项(resolve options)，以及许多其他增强功能。
这个时候dist文件就会多一个bundle.js。
const path = require('path');
module.exports = {
entry: './src/index.js',//入口文件
output: {//输出文件
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
}
};
6.NPM 脚本。设置快捷方式，在package.json中scripts里面添加。
{ "name": "webpack-demo", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo "Error: no test specified" && exit 1", + "build": "webpack" }, "keywords": [], "author": "", "license": "ISC", "devDependencies": { "webpack": "^4.0.1", "webpack-cli": "^2.0.9", "lodash": "^4.17.5" } }
现在可以使用 npm run build 命令，来替代npx 命令。
通过向 npm run build 命令和你的参数之间添加两个中横线，可以将自定义参数传递给 webpack，例如：npm run build -- --colors。
7.加载 CSS。
为了从 JavaScript 模块中 import 一个 CSS 文件，需要在 module 配置中 安装并添加 style-loader 和 css-loader： npm install --save-dev style-loader css-loader。可以在依赖于此样式的文件中 import './xx.css'。现在，当该模块运行时，含有 CSS 字符串的 <style> 标签，将被插入到 html 文件的 <head> 中。
在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'
+ ]
+ }
+ ]
+ }
};
8.加载图片和加载字体，file-loader 和 url-loader 可以接收并加载任何文件，然后将其输出到构建目录。这就是说，我们可以将它们用于任何类型的文件，包括字体，这里举例file-loader：npm install --save-dev file-loader
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'
]
},
+ {
+ test: /.(png|svg|jpg|gif)$/,
+ use: [
+ 'file-loader'
+ ]
+ },
+ {
+ test: /.(woff|woff2|eot|ttf|otf)$/,
+ use: [
+ 'file-loader'
+ ]
+ }
]
}
};
9.加载数据。
可以加载的有用资源还有数据，如 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' + ] + }