一、window下全局安装webpack
1、首先安装最新版node
2、全局安装webpack
npm install webpack webpack-cli webpack-dev-server -g
二、创建并且进入项目
md wpone & cd wpone
三、在当前项目根目录下初始化项目
npm init -y
四、在当前项目安装相关配置文件
1、安装webpack脚手架
npm install --save-dev webpack webpack-cil
2、安装lodash配置
npm install --save-dev lodash
3、安装css配置
npm install --save-dev style-loader css-loader
注意：安装了css配置文件需要在webpack.config.js中的moduls中配置style-loader，css-loader
4、安装图片和字体配置
npm install --save-dev file-loader
5、安装CSV,TSV和XML
npm install --save-dev csv-loader xml-loader
6、入口文件名称管理
npm install --save-dev html-webpack-plugin
6、清除实际项目不需要的文件
npm install --save-dev clean-webpack-plugin
注意：在调用时的实际代码与官网一致
五、创建相关文件和目录 wpone |- package.json |- webpack.config.js |- /dist |- index.html |- /src |- my-font.woff |- my-font.woff2 |- icon.png |- style.css |- index.js |- /node_modules
1、package.json
{ "name": "webpack-demo", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "build": "webpack" }, "keywords": [], "author": "", "license": "ISC", "devDependencies": { "webpack": "^4.0.1", "webpack-cli": "^2.0.9", "lodash": "^4.17.5" } }
2、webpack.config.js
`const path = require('path'); const { CleanWebpackPlugin } = require('clean-webpack-plugin'); const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
},
plugins: [
//功能已更新，与官网文档不同
new CleanWebpackPlugin(),
//入口文件名称管理
new HtmlWebpackPlugin({
title: 'Output Management ok'
})
],
module: {
rules: [
//css配置
//安装了style-loader css-loader方可配置
{
test: /.css/,
use: [
'style-loader',
'css-loader'
]
},
//图片和字体文件配置
//安装了file-loader方可配置
{
test: /\.(png|svg|jpg|gif)/,
use: ['file-loader']
},
{
test: /.(woff|woff2|eot|ttf|otf)/,
use: [
'file-loader'
]
},
//xml文件配置
//安装了csv-loader xml-loader方可配置
{
test: /\.(csv|tsv)/,
use: [
'csv-loader'
]
},
{
test: /.xml$/,
use: [
'xml-loader'
]
}
]
}
};
3、index.html
4、style.css
.hello { font-size: 60px; color: red; font-family: 'MyFont'; background: url('./icon.png'); height: 213px; width: 168px; border: 1px solid red; margin-bottom: 60px; }
5、index.js
import _ from 'lodash'; import './style.css'; import Icon from './icon.png'; function component() { var element = document.createElement('div'); element.innerHTML = _.join(['Hello', 'webpack'], ' '); var myIcon = new Image(); myIcon.src = Icon; element.appendChild(myIcon); return element; } document.body.appendChild(component());
六、设置打包命令
1、在webpack.config.js中参数scripts添加"build": "webpack"
2、执行命令
npm run build
