此文为 这篇文章的缩略版
创建项目文件夹
mkdir webpack && cd webpack初始化生成package.json文件
npm init-
安装webpack至该目录(非全局)
npm install --save-dev webpack-
npm install --save-dev webpack-cli或npm install --save-dev webpack-command
-
创建测试用结构
mkdir app publictouch app/Greeter.js app/main.js public/index.html
-
各文件初始代码
public/index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Webpack Sample Project</title> </head> <body> <div id='root'> </div> <script src="bundle.js"></script> </body> </html>app/Greeter.js
const greeter = require('./Greeter.js'); document.querySelector("#root").appendChild(greeter());app/main.js
module.exports = function() { var greet = document.createElement('div'); greet.textContent = "Hi there and greetings!"; return greet; }; 使用webpack编译
node_modules/.bin/webpack app/main.js public/bundle.js-
配置
webpack.config.js简化上条命令成node_modules/.bin/webpacktouch webpack.config.js
module.exports = { entry: __dirname + '/app/main.js', //唯一入口文件 output: { path: __dirname + '/public', //打包后文件存放位置 filename: 'bundle.js' //打包后输出文件文件名 }, mode: 'development' //不配置则浏览器控制台会有提示, 暂不知有何效果 } -
配置package.json简化上条命令成
npm start(实际又从npm run start省略来{ ... "scripts": { ... "start": "webpack" } } -
为webpack配置
source maps，在webpack.config.js中添加module.exports = { ... devtool: 'eval-source-map' //在同文件中生成source map, 适用于开发环境 } -
构建本地服务器
npm install --save-dev webpack-dev-servermodule.exports = { devServer: { contentBase: './public', //应该是指localhost:8080访问的根目录 historyApiFallback: true, inline: true //浏览器监听, 修改文件保存后自动刷新 } }{ ... "scripts": { ... "server": "webpack-dev-server --open" } }npm run server
-
更新文件
touch app/config.json{ "greetText": "Hi there and greetings from JSON!" }- 更新
app/Greeter.jsvar config = require('./config.json'); module.exports = function() { var greet = document.createElement('div'); greet.textContent = config.greetText; return greet; };
-
安装Babel
npm install --save-dev babel-core babel-loader babel-preset-env-
webpack.config.js中配置Babelmodule.exports = { ... module: { rules: [ ... { test: /(\.jsx|\.js)$/, use: { loader: 'babel-loader' options: { presets: [ 'env' ] } }, exclude: /node_modules/ } ] } } - 更新
app/Greeter.jsimport config from './config.json'; var greeter = () => { let greet = document.createElement('div'); greet.textContent = config.greetText; return greet; } export default greeter - 更新
app/main.jsimport greeter from './Greeter'; document.getElementById('root').appendChild(greeter());
-
将Babel中options配置项分离至新文件
.babelrc{ "presets": ["env"] } -
安装并使用
style-loader和css-loadernpm install --save-dev style-loader css-loader-
更新
webpack.config.js配置module.exports = { ... module: { rules: [ ... { test: /(\.css)$/, use: [ { loader: 'style-loader' }, { loader: 'css-loader' } ] } ] } } -
app下创建main.css，touch app/main.css*{ margin: 0; padding: 0; } -
将
app/main.css导入main.js... import './main.css';
-
css模块化
- 配置
css-loader{ loader: 'css-loader', options: { modules: true, //启用css modules localIdentName: '[name]__[local]--[hash:base64:5]' //指定css的类名格式 } } -
app下创建greeter.css，touch app/greeter.css.root { background: #87d; color: limegreen; } - 将
app/greeter.css导入Greeter.jsimport config from './config.json'; import styles from './Greeter.css'; //引入css var greeter = () => { let greet = document.createElement('div'); greet.textContent = config.greetText; greet.className = styles.root; //赋予className return greet; } export default greeter
- 配置
-
安装使用
postcss,autoprefixernpm install --save-dev postcss-loader autoprefixer- 在css module后添加
postcss-loader{ test: /(\.css$)/, use: [ ... { loader: 'postcss-loader' } ] } - 配置
postcss.config.jsmodule.exports = { plugins: [ require('autoprefixer') ] }
使用内置插件
BannerPlugin
const webpack = require('webpack');
...
module.exports = {
...
plugins: [
new webpack.BannerPlugin('版权所有, 翻版必究') //内置插件.....
]
}
- 安装使用
HtmlWebpackPlugin插件npm install --save-dev html-webpack-plugin- 删除public文件夹，创建
app/index.tpl.html文件touch app/index.tpl.html<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Webpack Sample Project</title> </head> <body> <div id='root'></div> </body> </html> - 更新
webpack.config.js... const HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { ... output: { ... path: __dirname + '/build', }, devServer: { ... contentBase: './build' }, plugins: [ ... new HtmlWebpackPlugin({ template: __dirname + '/app/index.tpl.html' }) ] } - 使用内置插件
Hot Module Replacement... module.exports = { ... devServer: { ... hot: true }, plugins: [ ... new webpack.HotModuleReplacementPlugin() ] }
- 安装使用
mini-css-extract-plugin插件 (详细npm install --save-dev mini-css-extract-plugin- 替换
style-loader... const MiniCssExtractPlugin = require("mini-css-extract-plugin"); ... { loader: MiniCssExtractPlugin.loader }
- 安装使用
clean-webpack-plugin插件 (详细
...
const CleanWebpackPlugin = require("clean-webpack-plugin");
plugins: [
...
new CleanWebpackPlugin('build/*.*', {
root: __dirname,
verbose: true,
dry: false
})
]
- 打包文件加入缓存
...
module.exports = {
...
output: {
...
filename: 'bundle-[hash].js'
}
};
参考：
