webpack 先這麼用

時間 2019-12-26

標籤 webpack 简体版

原文原文鏈接

webpack

介紹 Webpack 是一個模塊打包器。它將根據模塊的依賴關係進行靜態分析，而後將這些模塊按照指定的規則生成對應的靜態資源；開發便捷，能替代部分 grunt/gulp 的工做，好比打包、壓縮混淆、圖片轉base64等javascript

安裝

// 全局安裝
npm install webpack -g

// 進入項目，安裝到項目依賴中
npm init
npm install webpack --save-dev

配置文件

每一個項目下都必須配置有一個 webpack.config.js ，它的做用如同常規的 gulpfile.js/Gruntfile.js，做爲配置項告訴 webpack 如何工做。css

默認狀況下，會搜索當前目錄的 webpack.config.js 文件，這個文件是一個 node.js 模塊，返回一個 json 格式的配置信息對象，或者經過 --config 選項來指定配置文件html

例子：java

module.exports = {
    entry: "./entry.js",
    output: {
        path: __dirname + "/dist",
        filename: "bundle.js"
    },
    module: {
        loaders: [
            { test: /\.css$/, loader: "style!css" }
        ]
    }
};

Loader

Loader 用於預處理文件node

使用方式

經過 require 指定
webpack.config.js 中配置
命令行執行

插件 Plugins

經過插件能夠添加特定功能webpack

內嵌插件

第三方插件

DefinePlugin

內嵌插件，無需安裝git

用於在編譯期間定義常量github

使用

例子：web

new webpack.DefinePlugin({
    PRODUCTION: JSON.stringify(true),
    VERSION: JSON.stringify("5fa3b9"),
    BROWSER_SUPPORTS_HTML5: true,
    TWO: "1+1",
    "typeof window": JSON.stringify("object")
})

copy-webpack-plugin

拷貝資源插件shell

官方這樣解釋 Copy files and directories in webpack ,在 webpack 中拷貝文件和文件夾

https://github.com/kevlened/copy-webpack-plugin

安裝

npm install --save-dev copy-webpack-plugin

使用

new CopyWebpackPlugin([patterns], options)

在 web pack.config.js 中添加：

var CopyWebpackPlugin = require("copy-webpack-plugin");

module.exports = {
	 plugins: [
	 	...
	 	 new CopyWebpackPlugin([{
            from: __dirname + '/src/index.html',
            to: __dirname + '/dist'
        }]),
	 	...
	 ]
}

配置項

clean-webpack-plugin

刪除編譯資源

在編譯前，刪除以前編譯結果目錄或文件

https://github.com/johnagan/clean-webpack-plugin

安裝

npm install clean-webpack-plugin --save-dev

使用

在 web pack.config.js 中添加：

var CleanPlugin = require("clean-webpack-plugin");

module.exports = {
	...
	 plugins: [
	 	...
	 		new CleanPlugin(['dist', 'build']),
	 	...
	 ]
	...
｝

dist 與 build 爲須要刪除資源

html-webpack-plugin

自動生成html插件生成 HTML5 文件並注入 webpack 綁定的一系列 js & css，生成對應 <script> 及 <link> 標籤 https://github.com/ampedandwired/html-webpack-plugin

安裝

npm install html-webpack-plugin --save-dev

使用

在 web pack.config.js 中添加：

var HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {

	...

	 plugins: [

	 	...
	 		new HtmlWebpackPlugin({
  			    filename: 'index.html',
            	template:'./src/template.html',
        		})
	 	...

	 ]

	...

｝

配置項

filename: 生成文件名稱，默認 index.html

template: 模版文件目錄及名稱

注意

此插件會受到 file-loader 的影響

編譯 ES6

安裝 loaders

安裝 babel-loader

npm install babel-loader --save-dev

安裝轉碼規則

npm install babel-preset-es2015 --save-dev

webpack.config.js 文件添加如下內容

......
    module: {
        loaders: [
            ...

            { test: /\.jsx?$/,loader: 'babel-loader', query: {presets: ['es2015']}}

        ]
    },
    resolve:{
        extensions:['','.js','.jsx']
    },

......