首先确保已经安装了最新版的node.js
生成package.json文件
打开命令行切换到项目文件夹
npm init
项目名称与版本为必填信息,其他选填即可。
安装webpack
打开命令行切换到项目文件夹安装webpack
npm install --save-dev webpack
使用配置文件进行构建
在项目文件夹下新建一个配置文件webpack.config.js
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
}
};
构建前要先安装webpack-cli
npm install -D webpack-cli
切换到当前文件夹输入以下命令进行构建
npx webpack --config webpack.config.js
加载css
为了从 JS 模块中引入一个 CSS 文件需要安装style-loader和css-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']
}]
}
};
在js文件中引入css
require('../css/style.css');
使用HtmlWebpackPlugin
安装HtmlWebpackPlugin
npm install --save-dev html-webpack-plugin
修改配置文件webpack.config.js
const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './src/js/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
},
plugins: [
// 加入 html 模板任务
new HtmlWebpackPlugin({
// 模板文件
template: './src/index.html',
// 打包后文件名称,会自动放到 output 指定的 dist 目录
filename: 'index.html'
})
]
};
使用CopyWebpackPlugin复制文件
安装CopyWebpackPlugin
npm install --save-dev copy-webpack-plugin
修改配置文件
const path = require('path');
const webpack = require('webpack');
const CopyWebpackPlugin = require('copy-webpack-plugin');
module.exports = {
entry: './src/js/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
},
plugins: [
// 复制文件
new CopyWebpackPlugin([
{
// 目标文件
from: './src/images',
// 输出到
to: './images'
}
])
]
};
使用UglifyJsPlugin压缩文件
安装UglifyJsPlugin
npm i -D uglifyjs-webpack-plugin
修改配置文件webpack.config.js
const path = require('path');
const webpack = require('webpack');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
module.exports = {
entry: './src/js/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
},
plugins: [
// 压缩文件
new UglifyJsPlugin()
]
};
使用ExtractTextWebpackPlugin打包css文件
安装ExtractTextWebpackPlugin
npm install --save-dev extract-text-webpack-plugin
在webpack 4x下使用这个版本会报错所以我们选择安装最新的版本
npm install --save-dev extract-text-webpack-plugin@next
在index.js中引入css
require('../css/style.css');
const path = require('path');
const webpack = require('webpack');
const ExtractTextPlugin = require("extract-text-webpack-plugin");
module.exports = {
entry: './src/js/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
},
module: {
rules: [{
test: /\.css$/,
use: ExtractTextPlugin.extract({
fallback: "style-loader",
use: "css-loader"
})
}]
},
plugins: [new ExtractTextPlugin("style.css")]
};
使用clean-webpack-plugin
用于每次构造之前删除dist文件夹
安装
npm install clean-webpack-plugin --save-dev
修改配置文件
const path = require('path');
const webpack = require('webpack');
const CleanWebpackPlugin = require('clean-webpack-plugin');
module.exports = {
entry: './src/js/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
},
plugins: [
// 每次构建删除dist文件夹
new CleanWebpackPlugin(['dist'])
]
};
使用 webpack-dev-server
安装webpack-dev-server
npm install --save-dev webpack-dev-server
修改配置文件
const path = require('path');
const webpack = require('webpack');
module.exports = {
entry: './src/js/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
},
// server
devServer: {
contentBase: './dist'
}
};
修改package.json,在scripts中添加start
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "webpack-dev-server --open"
},
命令行中输入 npm start运行
具体使用方法参考官方文档:https://doc.webpack-china.org/guides/