首頁 > web前端 > js教程 > webpack的插件詳解

webpack的插件詳解

php中世界最好的语言
發布: 2018-03-19 17:12:21
原創
2720 人瀏覽過

這次帶給大家webpack的插件詳解,使用webpack插件的注意事項有哪些,以下就是實戰案例,一起來看一下。

1.自動建立HTML,可壓縮空格,可為引用的js加版本號或隨機數:html-webpack-plugin
2.處理CSS:css-loader與style-loader
3.處理LESS:less-loade與less
4.提取css程式碼到css檔案:extract-text-webpack-plugin
5.開發環境下的伺服器建立:webpack-dev-server
6.解析ES6程式碼:babel-core babel-preset-env babel-loader
7.解析ES6新增的物件函數:babel-polyfill
8.解析react的jsx語法:babel-preset-react
9.轉換相對路徑到絕度路徑:nodejs的path模組
10.給檔案加上hash值:[chunkhash],[hash]
11.清空輸出資料夾之前的輸出檔案: clean-webpack-plugin
12.模組熱替換:NamedModulesPlugin和HotModuleReplacementPlugin
13.環境變數
14.跨平台使用環境變數: cross-env
15.處理圖片路徑: file-loader和html-loader
16.圖片壓縮:image-webpack-loader
17.定位原始檔碼:source-map
18.分離生產環境和開發環境的設定檔

#1.自動建立HTML,可壓縮空格,可給引用的js加版本號或隨機數:html-webpack-plugin

解決方案:使用外掛 html-webpack-plugin
webpack.config.js如下:

module.exports = {
  entry: './src/app.js',
  output: {
    path: dirname + '/dist',
    filename: 'app.bundle.js'
  },
  plugins: [new HtmlWebpackPlugin({
    template: './src/模板文件.html',
    filename: '构建的.html',
    minify: {
      collapseWhitespace: true,
    },
    hash: true,
  })]
};
登入後複製

注意要有path,因為這個輸出的html需要知道輸出目錄

2.處理CSS:css-loader與style-loader

loader用於對模組的原始碼進行預處理轉換。

解決方案:使用css-loader,style-loader

看一下專案結構:
webpack的插件詳解

此時執行webpack指令會拋出錯誤:
webpack的插件詳解

接下來安裝css-loader 和style-loader

npm install --save-dev css-loader style-loader
登入後複製

再修改webpack.config.js為:
webpack的插件詳解







webpack的插件詳解

這其中rules數組就是loader用來的匹配和轉換資源的規則數組。

test代表符合需轉換檔案的
正規表示式
,而圖中表示符合所有以css結尾的檔案。

而use數組代表用哪些loader去處理這些符合的檔案。


此時再執行webpack,打包後的檔案bundle.js就包含了css程式碼。 webpack的插件詳解其中css-loader負責載入css,打包css到js中。

而style-loader負責產生:當js執行時,將css程式碼透過style標籤注入dom。 ######3.處理LESS:less-loade與less######解決方案:使用less-loader###但是用less-loader只是將LESS程式碼轉換為css程式碼。如果要打包檔案到js中,還是需要用到上面提到的css-loader和style-loader。 ######看一下專案結構:############然後app.js的程式碼為:###
import styles from './app.less';
console.info('我是一个js文件123')
登入後複製
###為了解決這個情況,首先要安裝less-loader ,而less-loader是基於less的,所以也要安裝less。 ###
npm i --save-dev less less-loader
登入後複製
###修改webpack.config.js為:###
module: {
  rules: [
    {
      test: /\.less$/,
      use: [ 'style-loader', 'css-loader', 'less-loader' ]
    }
  ]
}
登入後複製
###4.提取css程式碼到css檔案:extract-text-webpack-plugin######很多時候我們想要的效果不是想要把幾個LESS或CSS處理好後,打包到一個js中,而是想要把它打包到一個css檔案中。 ###此時就有了插件 extract-text-webpack-plugin。 ###先安裝###
npm i --save-dev extract-text-webpack-plugin
登入後複製
###然後修改webpack.config.js為:#########

与原配置对比可以发现,比html-webpack-plugin这个插件多做了一步,就是在匹配和转换规则里面的use中使用了ExtractTextPlugin.extract。
注意这里的fallback表示,在提取文件失败后,将继续使用style-loader去打包到js中。
此时运行webpack
可以发现输出目录build下生成了一个style.css文件,也就是我们在webpack.config.js中期望生成的文件,并且在生成的demo.html中被引用了。

5.开发环境下的服务器搭建:webpack-dev-server

webpack-dev-server可以在本地搭建一个简单的开发环境用的服务器,自动打开浏览器,而且还可以达到webpack -watch的效果。
首先安装一下:

npm i -g  webpack-dev-server
npm i --save-dev webpack-dev-server
登入後複製

这里不需要改动webpack.config.js,直接运行命令

webpack-dev-server
登入後複製

查看webpack的插件詳解:
webpack的插件詳解

显示项目运行在http://localhost:8080/
webpack的输出目录的路径在/下面
并且这个服务器会自动识别输出目录下名为index的HTML文件,而我们之前输出的文件名为demo.html。
所以还需要将之前html-webpack-plugin中配置的filename改为index.html,或者直接用http://localhost:8080/demo.html也行。
当我们修改了源代码后,打开的网页还会自动更新。

为了更灵活的应用开发环境的服务器,也可以在webpack.config.js中加入如下代码:
webpack的插件詳解

devServer配置 功能
port 修改端口为8787,而不是默认的8080。
open 为true表示会自动打开浏览器,而不是需要我们再手动打开浏览器并在里面输入http://localhost:8080。
compress 对本地server返回的文件提供gzip压缩
index 指定网站首页映射的文件,默认为index.html

6.解析ES6代码:babel-core babel-preset-env babel-loader

这里说是ES6,实际上可以认为是ECMAScript的高版本代码,只是代指而已。
babel的作用是将浏览器还未支持的这些高版本js代码转换成可以被指定浏览器支持的js代码。

这里列出可以转换的大致语法:
webpack的插件詳解

那么首先就需要安装babel

npm install babel-core babel-preset-env --save-dev
登入後複製

然后,为了和webpack结合起来,要用到babel-loader

npm install babel-loader --save-dev
登入後複製

然后在webpack.config.js的rules数组中增加以下代码:

{
  test: /\.js$/,
  exclude: /(node_modules)/,
  use: {
    loader: 'babel-loader',
    options: {
      presets: ['env']
    }
  }
}
登入後複製

这行代码的意思是用babel-loader解析除了node_modules文件下的所有js文件。
而babel-loader就是用babel去解析js代码。
options的内容类似于.babelrc文件的配置,有了这个就不需要.babelrc文件了。
presets表示预处理器,现在的babel不像以前需要很多预处理器了,只需要env这一个就够了。

修改之前的app.js中的代码为:

console.info('我是一个js文件123')
const doSomething=() => {
  console.info('do do do')
}
登入後複製

使用webpack命令后,可以看到我们最后的打包js文件中代码变成了这样:
webpack的插件詳解

7.解析ES6新增的对象函数:babel-polyfill

以下为这些新增函数:
webpack的插件詳解

安装:

npm install --save-dev babel-polyfill
登入後複製

为了确保babel-polyfill被最先加载和解析,所以一般都是讲babel-polyfill在最开始的脚本中引入。
而在webpack中,就是在放到entry中,所以需要修改webpack.config.js中的配置为:

webpack的插件詳解

8.解析react的jsx语法:babel-preset-react

安装

npm install --save-dev babel-preset-react
登入後複製

配置:
webpack的插件詳解

这里是匹配所有以js或者jsx结尾的文件,并用 babel-preset-env和babel-preset-react进行解析

9.转换相对路径到绝度路径:nodejs的path模块

这里首先介绍一下nodejs的path模块的一个功能:resolve。
将相对路径转换为绝对路径。
在最开始引用path模块

var path = require('path');
登入後複製

然后可以在输出设置那里修改代码为:

  output: {
    path: path.resolve(dirname, 'build'),
    filename: 'bundle.js'
  },
登入後複製

和我们原来的代码没有任何区别。

10.给文件加上hash值:[chunkhash],[hash]

hash和chunkhash有区别,hash的话输出的文件用的都是同一个hash值,而chunkhash的话是根据模块来计算的,每个输出文件的hash值都不一样。
直接将输出文件改为

output: {
  path: path.resolve(dirname, 'build'),
  filename: 'bundle.[chunkhash].js'
},
登入後複製

[chunkhash]就代表一串随机的hash值

11.清空输出文件夹之前的输出文件:clean-webpack-plugin

当我们像上面一样不断改变输出文件时,之前的输出文件并没有去掉。
为了解决这个问题就需要clean-webpack-plugin。
首先安装

npm i clean-webpack-plugin --save-dev
登入後複製

然后引用插件,并声明每次生成输出需要清空的文件夹

var CleanWebpackPlugin = require('clean-webpack-plugin');
var pathsToClean = [
  'build',
]
登入後複製

再在插件配置中加入:

new CleanWebpackPlugin(pathsToClean)
登入後複製

12.模块热替换:NamedModulesPlugin和HotModuleReplacementPlugin

之前的webpack-dev-server提供了监听功能,只要代码改变,浏览器就会刷新。
但是模块热替换是不会刷新浏览器,只刷新修改到的那部分模块。
模块热替换无需安装。
首先需要引入模块

var webpack = require('webpack')
登入後複製

其实插件中加入:

new webpack.NamedModulesPlugin(),
new webpack.HotModuleReplacementPlugin()
登入後複製

此时运行webpack可能会报错,我们需要把之前在输出环境中写的[chunkhash]改为[hash]

13.环境变量

可以在脚本中这么写:

"scripts": {
"dev": "webpack-dev-server",
"prod": "set NODE_ENV=production && webpack -p"
},

这样在webpack.config.js中这样修改上面的东西:

webpack的插件詳解

if (isProduction) {
    config.output.filename = 'bundle.[chunkhash].js'
} else {
    config.plugins.push(new webpack.NamedModulesPlugin())
    config.plugins.push(new webpack.HotModuleReplacementPlugin())
}
登入後複製

这样就可以根据环境的不同来运行不同的配置

14.跨平台使用环境变量: cross-env

上述设置环境变量的脚本中只有在window下才有效,在linux和mac上需要使用

"prod": "NODE_ENV=production webpack -p"
登入後複製

为了解决这个问题,使得不同平台的人能公用一套代码,我们可以使用cross-env。
首先进行安装:

npm i --save-dev cross-env
登入後複製

然后命令直接使用类似于mac上的用法即可

"prod": "cross-env NODE_ENV=production webpack -p"
登入後複製

15.处理图片路径: file-loader和html-loader

file-loader可以用来处理图片和字体文件在css文件中的路径问题,输出的css文件中会引用输出的文件地址。
html-loader可以用来处理html中,比如img元素的图片路径问题。
首先安装

npm i --save-dev file-loader html-loader
登入後複製

配置:

        {
            test: /\.(gif|png|jpe?g|svg)$/i,
            use: {
                loader: 'file-loader',
                options: {
                    name: '[name].[ext]',
                    outputPath: 'src/images/'
                }
            }
        },
        {
            test: /\.html$/,
            use: [{
                loader: 'html-loader',
                options: {
                    minimize: true
                }
            }],
        }
登入後複製

16.图片压缩:image-webpack-loader

安装:

npm i --save-dev image-webpack-loader
登入後複製

配置:

    {
            test: /\.(gif|png|jpe?g|svg)$/i,
            use: [{
                    loader: 'file-loader',
                    options: {
                        name: '[name].[ext]',
                        outputPath: 'images/'
                    }
                },
                {
                    loader: 'image-webpack-loader',
                    options: {
                        bypassOnDebug: true,
                    }
                }
            ]
        },
登入後複製

这里的options中也可以具体配置各个图片类型的压缩质量

17.定位源文件代码:source-map

如果我们用web-dev-server运行我们的输出文件,发现其中有些BUG,然后打开开发者工具取定位文件的时候,只会定位到我们的输出文件。
而这些输出文件是经过处理的,我们只有找到我们的源文件代码,然后进行相应的修改才能解决问题。
于是这里我们需要用到source-map。
很简单,在webpack.config.js中加入如下配置即可:

devtool: 'source-map',
登入後複製

就这么简单,还不需要安装什么插件。
但是这只对js有效,如果我们的css出现错误了呢,答案就是如下配置:
webpack的插件詳解

18.分离生产环境和开发环境的配置文件

之前我们通过在命令中设置环境变量,并且通过环境变量来判断环境来进行不同的配置。
现在我们用官方推荐的方法来分离生产环境和开发环境的配置文件。
我们将webpack.config.js分为三个文件

  • webpack.common.js

  • webpack.dev.js

  • webpack.prod.js

其中webpack.common.config.js为生产环境和开发环境共有的配置,dev为开发环境独有的配置,prod为生成环境独有的配置。
而想要合成真正的配置文件,还需要一个工具:webpack-merge。

  npm install --save-dev webpack-merge
登入後複製

以下是我们之前的webpack.config.js代码:

var ExtractTextPlugin = require('extract-text-webpack-plugin')
var HtmlWebpackPlugin = require('html-webpack-plugin')
var CleanWebpackPlugin = require('clean-webpack-plugin')
var path = require('path')
var webpack = require('webpack')
var pathsToClean = [
    'build',
]
var isProduction = process.env.NODE_ENV === 'production'
var config = {
    entry: ['babel-polyfill', './src/app.js'],
    output: {
        path: path.resolve(dirname, 'build'),
        filename: '[name].[hash].js'
    },
    devtool: 'source-map',
    devServer: {
        port: 8787,
        open: true,
        compress: true,
        index: 'demo.html'
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './template/index.html',
            filename: 'demo.html',
            minify: {
                collapseWhitespace: true,
            },
            hash: true
        }),
        new ExtractTextPlugin({ filename: 'style.css', allChunks: false }),
        new CleanWebpackPlugin(pathsToClean)
    ],
    module: {
        rules: [{
                test: /\.css$/,
                use: ExtractTextPlugin.extract({
                    fallback: 'style-loader',
                    use: ['css-loader?sourceMap']
                })
            },
            {
                test: /\.less$/,
                use: ExtractTextPlugin.extract({
                    fallback: 'style-loader',
                    use: ['css-loader?sourceMap', 'less-loader?sourceMap']
                })
            },
            {
                test: /\.jsx?$/,
                exclude: /(node_modules)/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['env', 'react']
                    }
                }
            },
            {
                test: /\.(gif|png|jpe?g|svg)$/i,
                use: [{
                        loader: 'file-loader',
                        options: {
                            name: '[name].[ext]',
                            outputPath: 'images/'
                        }
                    },
                    {
                        loader: 'image-webpack-loader',
                        options: {
                            bypassOnDebug: true,
                        }
                    }
                ]
            },
            {
                test: /\.html$/,
                use: [{
                    loader: 'html-loader',
                    options: {
                        minimize: true
                    }
                }],
            }
        ]
    }
};
if (isProduction) {
    config.output.filename = '[name].[chunkhash].js'
} else {
    config.plugins.push(new webpack.NamedModulesPlugin())
    config.plugins.push(new webpack.HotModuleReplacementPlugin())
}
module.exports = config
登入後複製

接下来分为三个文件,webpack.common.js:
var ExtractTextPlugin = require('extract-text-webpack-plugin')
var HtmlWebpackPlugin = require('html-webpack-plugin')
var CleanWebpackPlugin = require('clean-webpack-plugin')
var path = require('path')
var webpack = require('webpack')

var pathsToClean = [
    'build',
]
var isProduction = process.env.NODE_ENV === 'production'
module.exports = {
    entry: ['babel-polyfill', './src/app.js'],
    output: {
        path: path.resolve(dirname, 'build'),
        filename: '[name].[chunkhash].js'
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './template/index.html',
            filename: 'demo.html',
            minify: {
                collapseWhitespace: true,
            },
            hash: isProduction
        }),
        new ExtractTextPlugin({ filename: '[name].[contenthash].css', allChunks: false }),
        new CleanWebpackPlugin(pathsToClean)
    ],
    module: {
        rules: [{
                test: /\.jsx?$/,
                exclude: /(node_modules)/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['env', 'react']
                    }
                }
            },
            {
                test: /\.(gif|png|jpe?g|svg)$/i,
                use: [{
                        loader: 'file-loader',
                        options: {
                            name: '[name].[ext]',
                            outputPath: 'images/'
                        }
                    },
                    {
                        loader: 'image-webpack-loader',
                        options: {
                            bypassOnDebug: true,
                        }
                    }
                ]
            },
            {
                test: /\.html$/,
                use: [{
                    loader: 'html-loader',
                    options: {
                        minimize: true
                    }
                }],
            }
        ]
    }
};
登入後複製

然后是webpack.dev.js:

const merge = require('webpack-merge');
const common = require('./webpack.common.js');
const webpack = require('webpack');
const ExtractTextPlugin = require('extract-text-webpack-plugin')
module.exports = merge(common, {
    output: {
        filename: '[name].[hash].js'
    },
    devtool: 'source-map',
    devServer: {
        port: 8787,
        open: true,
        compress: true,
        index: 'demo.html'
    },
    plugins: [
        new webpack.NamedModulesPlugin(),
        new webpack.HotModuleReplacementPlugin()
    ],
    module: {
        rules: [{
                test: /\.css$/,
                use: ExtractTextPlugin.extract({
                    fallback: 'style-loader',
                    use: ['css-loader?sourceMap']
                })
            },
            {
                test: /\.less$/,
                use: ExtractTextPlugin.extract({
                    fallback: 'style-loader',
                    use: ['css-loader?sourceMap', 'less-loader?sourceMap']
                })
            }
        ]
    }
});
登入後複製

最后是webpack.prod.js:

const merge = require('webpack-merge');
const common = require('./webpack.common.js');
const ExtractTextPlugin = require('extract-text-webpack-plugin')
module.exports = merge(common, {
    module: {
        rules: [{
                test: /\.css$/,
                use: ExtractTextPlugin.extract({
                    fallback: 'style-loader',
                    use: ['css-loader']
                })
            },
            {
                test: /\.less$/,
                use: ExtractTextPlugin.extract({
                    fallback: 'style-loader',
                    use: ['css-loader', 'less-loader']
                })
            }
        ]
    }
});
登入後複製

然后修改一下package.json中的脚本即可

  "scripts": {
    "dev": "webpack-dev-server --config webpack.dev.js",
    "prod": "cross-env NODE_ENV=production webpack -p --config webpack.prod.js"
},
登入後複製

相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!

推荐阅读:

React中有哪些类定义组件

正则表达式怎么在字符串中提取数字

以上是webpack的插件詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板