安装webpack
首先确保已经安装了最新版的node.js
打开命令行切换到项目文件夹安装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') } };
切换到当前文件夹输入以下命令进行构建
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/