使用webpack

時間  2019-12-04
標籤 使用 webpack 简体版
原文   原文鏈接

web/webpack

Webpack介紹

Copyright @ 後盾網 houdunwang.comcss

WebPack能夠看作是模塊打包機：它作的事情是，分析你的項目結構，找到JavaScript模塊以及其它的一些瀏覽器不能直接運行的拓展語言（less，ES6等），並將其打包爲合適的格式以供瀏覽器使用。html

Webpack的工做方式是：把你的項目當作一個總體，經過一個給定的主文件（如：index.js），Webpack將從這個文件開始找到你的項目的全部依賴文件，使用loaders處理它們，最後打包爲一個瀏覽器可識別的JavaScript文件。node

安裝命令

使用npm 或 cnpm 安裝webpack及相關的軟件包webpack

cnpm i --save-dev webpack html-webpack-plugin babel-cli babel-loader babel-core babel-preset-env style-loader css-loader less-loader less postcss-loader precss autoprefixer less sass-loader node-sass html-loader file-loader url-loader  uglifyjs-webpack-plugin webpack-dev-server

打包實例

配置文件

webpack.config.js是webpack 使用的配置文件es6

module.exports = {
    entry: {
        //入口文件
        main: './app.js'
    },
    output: {
        //保存目錄 __dirname指根目錄
        path: __dirname + '/dist',
        //打包後的文件
        filename: 'bundle.js',
    }
}

注意這是一個基本的配置文件，後面咱們會加強這個文件web

目錄結構
[image:7CCCF966-17D0-4A0B-B5B6-CBAC1FE6B3A7-1189-0000027EA2D13BC0/A205346F-3566-44A9-9FC8-6F8C085E5EF2.png]
clipboard.png正則表達式

建立index.html模板文件npm

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="dist/bundle.js"></script>
</head>
<body>
</body>
</html>

建立主入口文件app.js，他的做用就是來引入咱們的項目文件。json

require('./hd.js');

建立文件hd.js瀏覽器

document.write('後盾人 人人作後盾');

打包

若是webpack不是全局安裝的，經過下面命令運行

./node_modules/webpack/bin/webpack.js

每次打這麼多有點不方便，咱們能夠將經常使用的執行腳本寫到package.json文件中

"scripts": {
    "start": "webpack --config webpack.config.js"
  },

如今能夠直接執行 npm run start 來執行webpack命令了
運行webpack

npm run start

執行成功後會建立打包文件 dist/bundle.js

處理器

處理器(loader)Loaders是webpack中最核心的功能了。loader經過調用外部的腳本或工具對各類格式的文件進行處理，好比說將ES6轉換爲現代瀏覽器能夠識別的JS文件。
能夠在一種文件上應用多個loader，好比咱們能夠對.less文件使用 less-loader css-loader style-loader等等，在配置文件中最後寫的最早應用。
Loaders須要單獨安裝而且須要在webpack.config.js中配置，Loaders的配置選項包括如下幾方面：

  1. test: 一個匹配loaders所處理的文件的擴展名的正則表達式(必須)

  2. use: loader的名稱(必須)

  3. include/exclude: 必須處理的文件或文件夾與屏蔽不須要處理的文件或文件夾(可選)

  4. options：爲loaders提供額外的設置選項(可選)

Less文件處理

下面經過解析less 實例講解loader的使用。
處理less須要安裝三個處理器:style-loader css-loader less-loader autoprefixer，咱們在前面的安裝章節已經安裝了這三個loader。
配置
修改webpack.config.js配置文件

module.exports = {
    entry: {
        //入口文件
        main: './app.js'
    },
    output: {
        //保存目錄 __dirname指根目錄
        path: __dirname + '/dist',
        //打包後的文件
        filename: 'bundle.js',
    },
    module: {
        rules: [
            {
                test: /\.less$/,
                use: [
                    //在html頁面中建立style樣式標籤
                    "style-loader",
                    // 轉換 CSS 到 CommonJS
                    "css-loader",
                    {
                        //爲瀏覽器
                        loader: "postcss-loader",
                        options: {
                            //postcss-loader的插件
                            plugins: function () {
                                return [
                                    //爲不一樣瀏覽器添加欄目前綴
                                    require('autoprefixer')
                                ];
                            }
                        }
                    },
                    "less-loader"
                ]
            }
        ]
    }
}

項目中新增less文件hd.less

body {
  h1 {
    background: #f00;
    display: flex;
  }
}

修改index.html添加標籤用於測試效果

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="dist/bundle.js"></script>
</head>
<body>
<h1>後盾網</h1>
</body>
</html>

在app.js入口文件中引入less

require('./hd.less');
require('./hd.js');

執行打包命令後咱們在瀏覽器中就能夠看到效果，並且生成的css文件也作了兼容性處理會爲不一樣瀏覽器加上樣式前綴。

npm run start

如今咱們掌握了使用loader處理less文件，其餘類型的文件也是同樣的方式。能夠經過查看webpack官網獲取更多loader的使用。 https://webpack.js.org/loaders/

JS文件處理

咱們繼續在webpack.config.js的module/rules配置段添加處理js的配置：

JS使用的loader咱們已經在前面的安裝部分都安裝過了

{
    test: /\.js$/,
    //不分析打包exclude指定的目錄
    exclude: /(node_modules|bower_components)/,
    //只分析include指定的目錄
    include: /(src)/,
    //將es6轉爲es5語法
    loader: 'babel-loader',
    options: {
        presets: ['env']
    }
}

也可咱們能夠在js文件中碼 ES6的代碼了，執行 npm run start 後會轉爲ES5的代碼適用於全部瀏覽器了。

options 配置是將ES6轉爲ES5的聲明，也能夠寫在.babelrc文件中獨立配置：

{
    presets: ['env']
}

通過上面的配置咱們就能夠在項目中使用 const let等ES6語法了。

圖片處理

我在webpack.config.js的module/rules配置段添加處理圖片loader的配置：

{
    //打包圖片
    test: /\.(png|jpg|jpeg|gif|svg)$/,
    use: [{
        loader: 'url-loader'
        , options: {
            //圖片小於50K時生成base64圖片字符串
            limit: 50000,
            //生成文件名規則
            name: 'dist/images/[sha512:hash:base64:7].[ext]'
        }
    }]
}

修改hd.less

body {
  background: url("1.jpg");
  h1 {
    background: #f00;
    display: flex;
  }
}

執行打包命令 npm start 後系統會將大於50Kb的圖片添加到 dist/images目錄中，小圖生成base64字符串。

插件（Plugins）

插件是用來拓展Webpack功能的，它們會在整個構建過程當中生效，執行相關的任務。Loaders和Plugins經常被弄混，可是他們實際上是徹底不一樣的東西，loaders是在打包構建過程當中用來處理源文件的（JSX，Scss，Less..），一次處理一個，插件並不直接操做單個文件，它直接對整個構建過程其做用。

版權插件

下面咱們經過版權聲明插件來演示插件的使用方法。

在配置文件的最開始調用webpack模塊

const webpack = require('webpack');

添加配置項 plugins 與module同級

plugins: [
    new webpack.BannerPlugin("copyright@houdunwang.com")
]

執行編譯命令後咱們會在最終生成的編譯文件頭部看到版本聲明內容。

模板編譯

html-webpack-plugin這個插件的做用是根據模板生成最終的HTML5文件，這個文件中自動引用項目使用的JS/CSS等文件，系統會自動插件編譯好的JS入口文件。
插件模塊 html-webpack-plugin 已經在前面章節安裝過了。

在配置文件最開始引入插件

const htmlWebpackPlugin = require('html-webpack-plugin');

在webpack.config.js 的plugins配置段添加：

new htmlWebpackPlugin({
    //靜態模板文件
    template: './app.html',
    //生成的文件名，不加路徑時生成到output.path設置的目錄中
    filename: 'index.html',
    //js文件插入到html中的位置
    inject: 'body',
    //html頁面title標籤值
    title: '後盾人 - 這是標題部分',
    //使用的入口文件
    chunks: ['main'],
    minify: {
        //刪除註釋內容
        removeComments: true,
        //刪除html中的空格、換行符
        // collapseWhitespace: true,
    }
})

建立模板文件app.html

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
</head>
<body>
    <h1>後盾人 houdunren.com</h1>
</body>
</html>

執行編譯命令後系統會將 app.html作爲模板生成新的項目文件 dist/index.html

JS壓縮插件
uglifyjs-webpack-plugin用於對生成的JS文件進行壓縮，在生產環境下壓縮事後的文件顯然會更節省咱們的帶寬與提升響應速度。
插件模塊 uglifyjs-webpack-plugin 已經在前面章節安裝過了。

在配置文件最開始引入插件

const UglifyJSPlugin = require('uglifyjs-webpack-plugin');

在webpack.config.js 的plugins配置段添加：

new UglifyJSPlugin({
    compress: {
        warnings: false
    },
    mangle: {
        except: ['$super', '$', 'exports', 'require']
    }
})

執行 npm start 命令後咱們就生成了壓縮的JS文件了。

自動刷新

上面的開發中咱們要執行如下幾步才能夠看到效果。

  1. 修改代碼

  2. npm start

  3. 手動刷新瀏覽器
    如今咱們能夠經過一個插件節省步驟，實現修改完代碼後自動刷新瀏覽器看到效果，若是在開發中咱們有2臺顯示器體驗會更好。

修改webpack.config.js配置文件，與output配置同級

devServer: {
    contentBase: path.join(__dirname, "dist"),
    compress: true,
    port: 9000
}

修改package.json添加npm 執行腳本

"scripts": {
    "start": "webpack --config webpack.config.js",
    "dev": "webpack-dev-server"
}

執行npm run dev命令後，在瀏覽器訪問 localhost:9000就可看到效果，如今咱們在修改代碼後瀏覽器會自動刷新出結果。

附錄

package.json

{
  "name": "houdunren",
  "version": "1.0.0",
  "description": "",
  "main": "webpack.config.js",
  "scripts": {
    "start": "webpack --config webpack.config.js",
    "dev": "webpack-dev-server"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "autoprefixer": "^6.7.6",
    "babel-cli": "^6.23.0",
    "babel-core": "^6.23.1",
    "babel-loader": "^6.4.0",
    "babel-preset-env": "^1.2.1",
    "css-loader": "^0.27.1",
    "file-loader": "^0.10.1",
    "html-loader": "^0.4.5",
    "html-webpack-plugin": "^2.28.0",
    "less": "^2.7.2",
    "less-loader": "^3.0.0",
    "node-sass": "^4.5.0",
    "postcss-loader": "^1.3.3",
    "precss": "^1.4.0",
    "sass-loader": "^6.0.3",
    "style-loader": "^0.13.2",
    "uglifyjs-webpack-plugin": "^0.3.0",
    "url-loader": "^0.5.8",
    "webpack": "^2.2.1",
    "webpack-dev-server": "^2.4.1"
  }
}

webpack.config.js

const webpack = require('webpack');
const htmlWebpackPlugin = require('html-webpack-plugin');
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
module.exports = {
    entry: {
        //入口文件
        main: './app.js'
    },
    output: {
        //保存目錄 __dirname指根目錄
        path: __dirname + '/dist',
        //打包後的文件
        filename: 'bundle.js',
    },
    devServer: {
        contentBase: "dist",
        compress: true,
        port: 9000
    },
    module: {
        rules: [
            {
                //打包圖片
                test: /\.(png|jpg|jpeg|gif|svg)$/,
                use: [{
                    loader: 'url-loader'
                    , options: {
                        limit: 50000,
                        //生成文件名規則
                        name: 'dist/images/[sha512:hash:base64:7].[ext]'

                    }
                }]
            },
            {
                test: /\.less$/,
                use: [
                    //在html頁面中建立style樣式標籤
                    "style-loader",
                    // 轉換 CSS 到 CommonJS
                    "css-loader",
                    {
                        //爲瀏覽器
                        loader: "postcss-loader",
                        options: {
                            //postcss-loader的插件
                            plugins: function () {
                                return [
                                    //爲不一樣瀏覽器添加欄目前綴
                                    require('autoprefixer')
                                ];
                            }
                        }
                    },
                    "less-loader"
                ]
            },
            {
                test: /\.js$/,
                //不分析打包exclude指定的目錄
                exclude: /(node_modules|bower_components)/,
                //只分析include指定的目錄
                include: /(src)/,
                //將es6轉爲es5語法
                loader: 'babel-loader'
            }
        ]
    }
    ,
    plugins: [
        new webpack.BannerPlugin("後盾網出品"),
        new htmlWebpackPlugin({
            //靜態模板文件
            template: './index.html',
            //生成的文件名，不加路徑時會生成到 output.path 屬性設置的目錄中
            filename: 'index.html',
            //js文件插入到html中的位置
            inject: 'body',
            //html頁面title標籤值
            title: '後盾人 - 這是標題部分',
            //使用的入口文件
            chunks: ['main'],
            minify: {
                //刪除註釋內容
                removeComments: true,
                //刪除html中的空格、換行符
                // collapseWhitespace: true,
            }
        }),
        new UglifyJSPlugin({
            compress: {
                warnings: false
            },
            mangle: {
                except: ['$super', '$', 'exports', 'require']
            }
        })
    ]
}
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程