webpack模塊打包工具（後續會更詳細的更新內容）

<1>基本配置

·指定目錄下 npm init

·npm install webpack --save-dev

·npm install webpack-cli --save-dev

·配置package.json：

"scripts": {

    "test": "echo \"Error: no test specified\" && exit 1",

    "dev": "webpack --mode development",

    "build": "webpack --mode production"

  },

·配置webpack.config.js:

const path = require("path"); //Node.js內置模塊

module.exports = {

    entry: './src/index.js', //配置入口文件

    output: {

        path: path.resolve(__dirname, 'dist'), //輸出路徑，__dirname：當前文件所在路徑

        filename: 'main.js' //輸出文件

//publicPath: ‘http://cdn.com/’ 配置後上線打包的文件路徑

    }

}

·根目錄下建立src以及src/index.js入口文件，將會打包成dist/main.js

·打包默認文件命令：

npm run dev

·打包不是默認文件使用命令：

npx webpack ./demo.js -o demo.bundle.js --mode development

·自動打包命令：

npx webpack --mode development --watch

<2>loader

·建立css文件，以及 npm install css-loader style-loader --save-dev

·配置webpack.config.js：

module:{

        rules:[

            {

                test: /\.css$/,

                use:['style-loader','css-loader']

            }

        ]

    }

·引入css文件，require(‘./style.css’)

·引入js文件，require(‘./world.js’)

<3>自動化生成HTML頁面，監聽index.html變化（不須要手動引入打包後的js入口文件）

·安裝插件 npm install html-webpack-plugin --save-dev

·webpack.config.js中require插件

·在module中添加配置：

plugins: [

        new htmlWebpackPlugin({

            template: path.join(__dirname, './index.html'),

            filename: 'index.html'

        })

    ]

·額外的html-webpack-plugin屬性：

plugins: [

        new htmlWebpackPlugin({

            //指定須要轉換的模板頁面

            template: path.join(__dirname, './index.html'),

            //文件名和路徑

            filename: 'index.html',

            //script標籤在head中展現，默認body

            inject: 'head',

            //須要上線的話，能夠利用這個屬性壓縮html文件，刪除註釋、空格等等

            minify: {

                removeComments: true,

                collapseWhitespace: true

            }

        })

    ]

<5>多頁應用：

·建立相應的js入口文件，例如： src/a.js、src/b.js、src/c.js以及須要用的主模板index.html

html中的頁面能夠使用webpack.config.js中htmlWebpackPlugin自定義的變量來區分打包後的頁面，由於使用同一份模板index.html：

<title><%= htmlWebpackPlugin.options.title %></title>

·配置entry和output：

const path = require("path");

module.exports = {

    entry:{

a: './src/a.js',

b: './src/b.js',

c: './src/c.js',

}

    output: {

        path: path.resolve(__dirname, 'dist'),

        filename: '[name].js' //使用[name]來根據js文件名的不一樣打包成相應名稱文件

    }

}

·配置plugins：

plugins: [

        new htmlWebpackPlugin({

            template: path.join(__dirname, './index.html'),

            filename: 'a.html',

            title: 'this is a html',

Chunks: [‘a’] //利用Chunks指定要包含的打包後的JS入口文件，打包後的a.html頁面就不會引入其餘打包的js入口文件

        }),

        new htmlWebpackPlugin({

            template: path.join(__dirname, './index.html'),

            filename: 'b.html',

            title: 'this is b html'

excludeChunks: [‘a’, ‘c’] //利用excludeChunks指定·不包含·的打包後的JS入口文件

        }),

        new htmlWebpackPlugin({

            template: path.join(__dirname, './index.html'),

            filename: 'c.html',

            title: 'this is c html',

Chunks: [‘c’]

        })

    ]

<6>babel：

·babel容許咱們徹底以ES6/ES7規範來寫js代碼，同時編譯成es5地代碼，以便最終能夠在當前並未實現es6規範的瀏覽器上運行

·babel的安裝：

npm install --save-dev babel-loader @babel/core

·webpack.config.js配置引入module的rules：

module: {

  rules: [

    { test: /\.js$/, exclude: /node_modules/, loader: "babel-loader" }

  ]

}

·presets插件：preset插件告訴babel-loader須要轉換成什麼樣的js語法，主流瀏覽器基本都實現了對es2015的支持，可是對es2016大都不支持，因此須要presets轉成瀏覽器可以解析的es2015語法

npm install @babel/preset-env --save-dev

·配置presets：建立.babelrc文件定義一個JSON對象  {「presets: [「@babel/preset-env」]}