本文所有代码都在GitHub
npx webpack 打包命令
注意,webpack 不会更改代码中除 import
和 export
语句以外的部分。如果你在使用其它 ES2015 特性,请确保你在 webpack 的 loader 系统中使用了一个像是 Babel 或 Bublé 的转译器。
如果 webpack.config.js
存在,则 webpack
命令将默认选择使用它。
- css文件打包模块
npm install --save-dev style-loader css-loader
- 静态文件打包(图片),包括css中的背景图片
npm install --save-dev file-loader
- index.html中动态引入打包文件,需要配置webpack.config.js 多入口管理
npm install --save-dev html-webpack-plugin
plugins:[
new HtmlWebpackPlugin({
title: 'Output Management'
})
],
html-webpack-plugin 会自动生成一个index.html
- 自动清理dist文件 清理输出目录
npm install clean-webpack-plugin --save-dev
plugins:[
new CleanWebpackPlugin(),
new HtmlWebpackPlugin({
title: 'Output Management'
})
],
- js错误信息定位:开发环境需要调试,不能使用压缩的js文件需要配置项
devtool:'inline-source-map',//js报错定位
- 开发用的简单便捷的编译方式
以下是主要命令
"watch": "webpack --watch",
"start": "webpack-dev-server --open",
"server": "node server.js"
后两个需要安装相应的包
npm install --save-dev webpack-dev-server
npm install --save-dev express webpack-dev-middleware
- 第一阶段的配置文件webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const webpack = require('webpack');
module.exports = {
// entry:'./src/index.js',
entry:{
// app:'./src/index.js',
// print:'./src/print.js',
app: './src/index.js'
},
devtool:'inline-source-map',//js报错定位
devServer:{
contentBase:'./dist',
hot:true,//热加载模块
},
plugins:[
new CleanWebpackPlugin(),
new HtmlWebpackPlugin({
title: 'Output Management'
}),
new webpack.NamedModulesPlugin(),//按import加载模块,这样入口就变成一个了
new webpack.HotModuleReplacementPlugin()
],
output:{
// filename:'bundle.js',
filename:'[name].bundle.js',
path:path.resolve(__dirname,'dist')
},
mode:'production',//压缩打包js
//文件打包规则
// module:{
// rules:[
// {
// test:/\.css$/,
// use:[
// 'style-loader',
// 'css-loader'
// ]
// },
// {
// test:/\.(png|svg|jpg|gif)$/,
// use:[
// 'file-loader'
// ]
// },
// {
// test:/\.(woff|woff2|eot|ttf|otf)$/,
// use:[
// 'file-loader'
// ]
// },
// {
// test:/\.(csv|tsv)$/,
// use:[
// 'csv-loader'
// ]
// },
// {
// test:/\.xml$/,
// use:[
// 'xml-loader'
// ]
// }
// ]
// }
}
对应的package.json
{
"name": "webpack-demo",
"sideEffects": true,
"version": "1.0.0",
"description": "",
"private": true,
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack",
"watch": "webpack --watch",
"start": "webpack-dev-server --open",
"server": "node server.js"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"clean-webpack-plugin": "^3.0.0",
"css-loader": "^3.2.0",
"csv-loader": "^3.0.2",
"express": "^4.17.1",
"file-loader": "^4.2.0",
"html-webpack-plugin": "^3.2.0",
"style-loader": "^1.0.0",
"webpack": "^4.40.2",
"webpack-cli": "^3.3.9",
"webpack-dev-middleware": "^3.7.1",
"webpack-dev-server": "^3.8.1",
"webpack-merge": "^4.2.2",
"xml-loader": "^1.2.1"
},
"dependencies": {
"lodash": "^4.17.15"
}
}