开始
// 初始化
npm init
// 安装webpack三部曲
npm i -D webpack webpack-cli webpack-dev-server html-webpack-plugin
在根目录创建 webpack.config.js 用来配置webpack，src文件夹用来保存开发文件
webpack.config.js
const webpack = require('webpack'); // 引入webpack
const path = require('path'); // 引入path模块用来处理路径
const HtmlWebapckPlugin = require('html-webpack-plugin')
module.exports = {
entry: './src/index.js',
// 入口文件路径
// 告诉webpack从哪里开始
output: {
filename: 'index.js',
// 打包文件名
path: path.resolve(__dirname, 'dist'),
// 打包文件输出位置
},
devtool: 'eval-source-map',
mode: "development",
// 告知 webpack 使用相应模式的内置优化。
// 可选值： development production none
devServer: { // server config
open: true, // 是否在浏览器打开
contentBase: path.resolve(__dirname, 'dist'), // 文件读取地址，和输入文件一致
hot: true, // 启用热更新
port: 4444, // 指定端口为4444
},
plugins: [
new HtmlWebapckPlugin({ // 自动创建HTML
title: 'webpack'
}),
],
}
devtool 用来告诉webpack是否生成，如何生成，更多选项查看 devtool
devServer 用来配置开发网络环境，更多配置查看 devServer
在src文件夹内创建入口文件index.js
// src/index.js
document.body.innerHTML = 'Hello Webpack'
在package.json文件增加命令
// package.json
// ...
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "webpack server",
"build": "webpack --mode production"
},
接下来在终端执行：npm run dev， 就会在你的浏览器打开一个网页http://localhost:4444/，在这里你可以看到你编写的程序。
到这里之后你的开发环境算是起步了，接下来我们来完善它，因为目前你还无法使用es6、React等去开发。
配置module
// 安装相关依赖
npm i -D css-loader style-loader less less-loader sass sass-loader
接着配置webpack.config.js
module.exports = {
// ...
module: {
rules: [
{
test: /\.css$/, // 匹配文件
use: ['style-loader', 'css-loader'] // 对应文件所需要的用到的loader
},
{
test: /\.less$/,
use: [
'style-loader',
{
loader: 'css-loader',
options: {
importLoaders: 0,
modules: {
localIdentName: '[name]__[local]__[hash:base64:5]',
},
},
},
'less-loader'
]
},
{
test: /\.s[ca]ss$/,
use: [
'style-loader',
{
loader: 'css-loader',
options: {
importLoaders: 0,
modules: {
localIdentName: '[name]__[local]__[hash:base64:5]',
},
},
},
'sass-loader'
]
},
]
},
}
现在你可以使用less和sass进行开发了。
babel
想要编译es6等就需要借助强大的babel进行编译了
module.exports = {
// ...
module: {
rules: [
// ...
{
test: /\.(js|jsx)$/,
exclude: /node_modules/, // 排除node_modules文件夹
use: {
loader: 'babel-loader',
options: {
cacheDirectory: true,
}
}
},
]
},
}
在根目录创建.babelrc用来配置babel
// .babelrc 文件
{
"presets" : [
"@babel/preset-env",
"@babel/preset-react"
],
"plugins": ["@babel/plugin-transform-runtime"]
}
现在你可以使用es6、React进行开发了。后面你需要使用什么库进行帮助你开发可进行下载使用。
优化
创建别名来帮助快速引入模块
module.exports = {
// ...
resolve: {
extensions: ['.js', '.jsx'], // 自动补齐拓展名
alias: { // 别名
src: path.resolve(__dirname, 'src'),
},
}
}
清理
module.exports = {
// ...
output: {
filename: 'index.js',
// 打包文件名
path: path.resolve(__dirname, 'dist'),
// 打包文件输出位置
clean: true, // 清理旧文件
},
}
// 或者
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
module.exports = {
// ...
plugins: [
new HtmlWebapckPlugin({ // 自动创建HTML
title: 'webpack'
}),
new CleanWebpackPlugin(),
],
}
停止监听node_modules变化
module.exports = {
// ...
watchOptions: {
ignored: /node_modules/
},
}
添加banner
在一些场景下需要添加一些信息用来判断版本等信息，可以使用BannerPlugin来添加
plugins: [
...plugins,
new webpack.BannerPlugin(`buildTime: ${new Date().toString()}`),
],
完整版
const webpack = require('webpack'); // 引入webpack
const path = require('path'); // 引入path模块用来处理路径
const HtmlWebapckPlugin = require('html-webpack-plugin')
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
module.exports = {
entry: {
// 入口文件路径
// 告诉webpack从哪里开始
index: './src/index.js',
login: './src/login.js',
// 多入口
},
output: {
filename: '[name]_[contenthash].js',
// 打包文件名
path: path.resolve(__dirname, 'dist'),
// 打包文件输出位置
clean: true, // 清理旧文件
chunkFilename: '[name]_[contenthash].js' // 代码拆分模块文件名
},
optimization: { // 多模块输出
runtimeChunk: 'single',
},
devtool: 'eval-source-map',
mode: "development",
// 告知 webpack 使用相应模式的内置优化。
// 可选值： development production none
devServer: { // server config
open: true, // 是否在浏览器打开
contentBase: path.resolve(__dirname, 'dist'), // 文件读取地址，和输入文件一致
hot: true, // 启用热更新
port: 4444, // 指定端口为4444
// host: '0.0.0.0', // 指定域名，默认localhost
},
plugins: [
new HtmlWebapckPlugin({ // 自动创建HTML
template: './index.html', // 模板
filename: 'index.html', // 名称
chunks: ['index'] // 模块名
}),
new HtmlWebapckPlugin({
template: './index.html',
filename: 'login.html',
chunks: ['login']
}),
new CleanWebpackPlugin(),
new webpack.BannerPlugin(`buildTime: ${new Date().toString()}`),
],
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
cacheDirectory: true,
}
}
},
{
test: /\.css$/, // 匹配文件
use: ['style-loader', 'css-loader'] // 对应文件所需要的用到的loader
},
{
test: /\.less$/,
use: [
'style-loader',
{
loader: 'css-loader',
options: {
importLoaders: 0,
modules: {
localIdentName: '[name]__[local]__[hash:base64:5]',
},
},
},
'less-loader'
]
},
{
test: /\.s[ca]ss$/,
use: [
'style-loader',
{
loader: 'css-loader',
options: {
importLoaders: 0,
modules: {
localIdentName: '[name]__[local]__[hash:base64:5]',
},
},
},
'sass-loader'
]
},
]
},
resolve: {
extensions: ['.js', '.jsx'], // 自动补齐拓展名
alias: { // 别名
src: path.resolve(__dirname, 'src'),
},
},
watchOptions: {
ignored: /node_modules/
},
}
