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