webpack 打包实例项目

    最近用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文件夹下，看到打包生成的文件。