安装webpack
新建项目的目录，并将命令行切换到该目录下：
mkdir webpackdemo && cd webpackdemo
初始化项目（我们自己开发的npm包，）
npm init -y
把webpack和webpack-cli安装到项目本地
npm install webpack webpack-cli --save-dev
创建webpack配置文件webpack.config.js
echo “Hello Webpack” > webpack.config.js
在package.json文件配置npm scripts
"scripts": { "build": "webpack --config webpack.config.js" },
调整package.json文件，以便确保我们的项目是private(私有的)，并且移除 main 入口
{ "name": "webpackdemo", "version": "1.0.0", "description": "webpack指南", -"main": "index.js", +"private": true }
使用webpack
在webpack.config.js文件中导出一个对象，通过对象中的属性对webpack进行配置：
const path = require('path'); module.exports = { mode: 'development', // 打包模式，目前配置的是开发模式 entry: './src/index.js', // 入口文件 output: { // 输出文件的配置 filename: 'main.js', path: path.resolve(__dirname, 'dist') } }
使用loader
由于webpack原始只支持JavaScript的打包，不支持其他文件类型的打包，因此不同类型的文件我们不同的loader来处理它们。
使用css-loader和style-loader处理css文件：
npm install css-loader style-loader –save-dev
配置
module: { rules: [ { test: /\.css$/, use: ['style-loader', 'css-loader'] } ] }
使用file-loader加载图片
npm install file-loader –save-dev
配置file-loader
module: { rules: [ { test: /\.css$/, use: ['style-loader', 'css-loader'] }, { test: /\.(png|svg|jpg|gif)$/, use: ['file-loader'] } ] }
使用plugin
插件（Plugin）是用来扩展webpack功能的。
HtmlWebpackPlugin
HtmlWebpackPlugin插件默认会生成一个index.html文件，用来替换原有文件，index.html文件的内容也会随着替换而改变。
安装插件
npm install html-webpack-plugin --save-dev
使用插件
const HtmlWebpackPlugin = require('html-webpack-plugin'); plugins: [ new HtmlWebpackPlugin({ title: 'Home', filename: 'home.html' }) ]
CleanWebpackPlugin
该插件会在构建之前清理dist/文件夹。
安装插件
npm install clean-webpack-plugin --save-dev
配置插件
使用devServer
安装webpack-dev-server
npm install webpack-dev-server --save-dev
配置
devServer: { contentBase: path.join(__dirname, 'dist'), port: 8080, index: 'home.html', hot: true, open: true, https: true }
