最近用webpack打包部署了一个web服务器项目,将过程记录一下,方便日后查阅。
1.安装webpack
npm install webpack webpack-cli --save-dev
2.配置babel-loader
用以解析ES6, ES7等js新特性语法,它的配置文件是.babelrc
npm install @babel/core @babel/preset-env babel-loader --save-dev
3.配置react
用以解析React JSX, Vue等语法。
npm install react react-dom @babel/preset-react --save-dev
4.配置css-loader
用以加载.css文件,并且转换成commonjs对象。
npm install style-loader --save-dev
5.配置style-loader
用以将样式通过<style>标签插入到head中。
npm install css-loader --save-dev
6.配置less-loader
用以将less转换成css。
npm install less less-loader --save-dev
7.配置file-loader
用以处理文件。
npm install file-loader --save-dev
8.配置文件webpack.config.js
'use strict'
const path = require('path')
module.exports = {
entry:'./app.js',
output:{
path: path.join(__dirname,'dist'),
filename:'app.js'
},
mode:'production',
module:{
rules:[
{ test: /.js$/, use:'babel-loader'},
{ test: /.css$/, use:['style-loader','css-loader']},
{ test: /.less$/, use:['style-loader','css-loader','less-loader']},
{ test: /.(png|jpg|gif|jpeg)$/, use:'file-loader'},
{ test: /.(woff|woff2|eot|ttf|otf)$/, use:'file-loader'}
]
}
}
entry表示入口,output的path和filename分别表示:打包生成的文件路径和文件名称。
9.配置文件.babelrc
{
"presets": [
"@babel/preset-env",
"@babel/preset-react"
]
}
10.打包
webpack
打包成功后,即可在当前目录的dist文件夹下,看到打包生成的文件。