打包神器webpack的一鍵式操作

創建基本的webpack4.x項目

1. 運行npm init -y 快速初始化項目
2. 在項目根目錄創建src源代碼目錄和dist產品目錄
3. 在 src 目錄下創建 index.html
4. 使用 cnpm 安裝 webpack ，運行cnpm i webpack webpack-cli -D
   • 如何安裝 cnpm: 全局運行 npm i cnpm -g
5. 注意：webpack 4.x 提供了 約定大於配置的概念；目的是爲了儘量減少 配置文件的體積；
   • 默認約定了：
   • 打包的入口是src -> index.js
   • 打包的輸出文件是dist -> main.js
   • 4.x 中 新增了 mode 選項(爲必選項)，可選的值爲：development 和 production;

// 向外暴露一個打包的配置對象
module.exports = {
    mode: "development"
}
//同樣也可以進行入口文件和出口文件的配置
module.exports = {
    entry: "./src/index.js",
    output: {
        path: path.resolve(__dirname, "dist"),
        // path: path.resolve(process.cwd(), "dist"),
        filename: "static/js/[name].js", // string [name].[chunkhash:8].js
    }
}

6. 配置html-webpack-plugin 插件
   導入在內存中自動生成index頁面，並引入相應的js文件。
   npm i --save-dev html-webpack-plugin
   創建一個插件的實例對象

// 導入在內存中自動生成index頁面的插件
const HtmlWebPackPlugin = require('html-webpack-plugin');
// 創建一個插件的實例對象
const htmlPlugin = new HtmlWebPackPlugin({
    // 源文件  根路徑
    template: path.join(__dirname, "./src/index.html"),
    // 生成的內存中首頁的名字
    filename: "index.html"
});
//或者在plugins中進行相應的配置
plugins: [
        new HtmlWebpackPlugin({
            title: 'My App',
            template: 'public/index.html'
        })
]

7. 配置webpack-dev-server 插件
   實時打包編譯，打包好的main.js放入了內存中，目錄是不可見的。通過實時打包可以直接引入內存中的main.js文件，速度更快。
   npm install webpack-dev-server --save-dev
   在目錄清單的scripts中進行配置

"dev": "webpack-dev-server --open Chrome --port 3000 --hot --host 127.0.0.1"

通過npm run dev進行啓動

8. 安裝css-loader style-loader對css進行打包管理
   npm install --save-dev style-loader css-loader

 module: {
        rules: [{
                test: /\.css$/i,
                use: ['style-loader', 'css-loader'],
            }
}

在這種情況下壓縮出來的樣式是內聯樣式，不方便進行閱讀。可以使用 mini-css-extract-plugin把 css單獨提取出來。
npm install --save-dev mini-css-extract-plugin
在rules中更改配置

const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
module: {
        rules: [{
                test: /\.css$/i,
                use: [MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader'],
            }
            ]
},
plugins: [
        new MiniCssExtractPlugin({
            filename: 'static/css/[name].css'
        })
    ]
}

9. 配置css預處理語言
   $ npm install less-loader less--save-dev
   在rules中更改配置

module: {
        rules: [ {
                test: /\.less$/i,
                use: [MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader', 'less-loader'],
            }
            ]
}

10. 安裝autoprefixer postcss-loader 插件
    自動增加前綴，提高兼容性
    npm i -D postcss-loader
npm i -D autoprefixer
    在rules中的css配置最後增加postcss-loader

module: {
        rules: [{
                test: /\.css$/i,
                use: [MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader'],
            }
            ]
}

新建一個postcss.config.js文件

module.exports = {
    plugins: [
        require('autoprefixer')
    ]
}

在package.json配置文件中增加一個字段

"browserslist": [
//兼容99.5%的瀏覽器
    "cover 99.5%",
    "last 8 version"
//最後8個版本
  ]

11. 安裝 file-loader插件
    對圖片資源進行處理
    $ npm install file-loader --save-dev
    在rules中更改配置

    module: {
        rules: [{
                test: /\.(png|jpe?g|gif)$/i,
                use: [{
                     loader: 'file-loader',
                     options: {
                         name: 'static/img/[name].[ext]',
                         publicPath: '/'
                     }
                }]
            }

在這種情況下，無論圖片多大都會進行處理會影響瀏覽器的渲染速度。
通過安裝url-loader插件實現對圖片的選擇性處理
$ npm install url-loader --save-dev
在rules中更改配置

    module: {
        rules: [{
                test: /\.(png|jpe?g|gif)$/i,
                use: [{
                    loader: 'url-loader',
                    options: {
                        limit: 10000, //小於8kb的轉換爲base64編碼並載入瀏覽器能夠減少http請求數
                        name: 'static/img/[name].[ext]',
                        publicPath: '/'
                    }
                }]
            }

12. 安裝copy-webpack-plugin插件
    在有些時候我們會對一些靜態資源進行原封不動的拷貝，手動的話太麻煩這時需要藉助copy-webpack-plugin插件
    $ npm install copy-webpack-plugin --save-dev
    在plugins中進行配置

const CopyPlugin = require('copy-webpack-plugin');
plugins: [
        new CopyPlugin([{
            from: path.resolve(process.cwd(), 'src/images/'),
            to: path.resolve(process.cwd(), 'dist/images')
        }])
    ]

13. 安裝babel插件

loader官方解釋是文件預處理器，通俗點說就是webpack在處理靜態文件的時候，需要使用 loader 來加載各種文件，比如： html文件需要使用html-loader ,css 需要使用css-loader 、 style-loader 等等。

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

babel-loader，用來處理ES6語法，將其編譯爲瀏覽器可以執行的js語法。
在 rules中添加配置信息

 module: {
        rules: [
            {
                test: /\.js$/,
                // (不處理node_modules 和 bower_components下的js文件) 優化處理加快速度
                exclude: /(node_modules|bower_components)/,
                use: {
                    loader: 'babel-loader',
                    options: {
                    // presets設置的就是當前js的版本
                        presets: ['@babel/preset-env']
                        //plugins: [require('@babel/plugin-transform-object-rest-spread')] // plugin是需要的插件       
                    }
                }
            }
        ],
    }

可以使用 options 屬性 來給loader傳遞選項：

• cacheDirectory ： 默認值是false. 當設置了這個值時，指定的目錄將會用來緩衝loader的執行結果。之後的webpack 構建，將會嘗試讀取緩衝，來避免每次都執行時，產生高性能消耗的編譯過程。如果提供的時空值或者傳入true，那麼loader使用默認的緩衝目錄node_modules/.cache/babel-loader 。(如果沒有找到node_modules將會往上一級查找)
  +babel-loader很慢！
• 解決辦法：
• 要排除 node_modules，參考文檔中的loaders 配置的exclude選項。
• 你也可以通過使用 cacheDirectory 選項，將 babel-loader 提速至少兩倍。 這會將轉譯的結果緩存到文件系統中。