webpack教程
精选
原创
©著作权归作者所有：来自51CTO博客作者mb63d8c4fd752f1的原创作品，请联系作者获取转载授权，否则将追究法律责任
安装webpack
新建项目的目录，并将命令行切换到该目录下：
mkdir webpackdemo && cd webpackdemo
初始化项目（我们自己开发的npm包，）
把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
}
