webpack的配置

一、介紹

模組打包器

支援es6模組化、amd、common

二、不同

程式碼分割

loader

熱更新

外掛

三、安裝和命令列

mkdir webpack-text

進入資料夾，npm init ,npm install webpack --save-dev

打包：webpack hello.js hello.bundle.js

打包過程會生成自己所需的一些內建的函式，管理依賴關係然後根據依賴關係對模組進行編號

四、loader

npm install css-loader style-loader --save-dev

require('style-loader!css-loader!./style.css')

這樣我們寫的css就會包含在style標籤裡，插入文件頂部

還可以在命令列裡指定：webpack hello.js hello.bundle.js --module-bind 'css=style-loader!css-loader'

這是給模組繫結loader，

檔案改變的時候，使用--watch可以使webpack自動更新自動打包

--progress可以看到打包過程

--display-modules 看打包模組

--display-reasons為什麼打包模組的原因

五、建立webpack的配置檔案

從零開始新建一個專案

mkdir webpack-demo

cd webpack-demo

npm init

npm install webpack --save-dev

mkdir src

src目錄下script和style等檔案

mkdir dist

新建初始化頁面index.html

引入打包後的js檔案bundle.js

專案根目錄下新建webpack.config.js


複製程式碼

,webpack自動尋找這個檔案執行，

使用common。js的模組化輸出

module.exports = {    entry: './src/script/main.js',//專案的入口檔案
    output： {
        path: './dist/js',//打包後檔案存放路徑，如果沒有js資料夾，就會自動建立
        filename: 'bundle.js'//生成的檔名
}
在高版本的webpack裡，需要這樣寫：
const path = require('path')
module.exports = {
	entry : './src/scripts/main.js',
	output : {
		path: path.resolve(__dirname,'./dist/js'),
		filename: 'bundle.js'	
	}
}
複製程式碼

新建main.js檔案

function hello (){}複製程式碼

然後執行打包，直接執行webpack

可以用命令列執行 webpack --config webpack.dev.config.js來執行指定js檔案

配置npm指令碼，在package.js裡的scripts裡,

'webpack':'webpack --config webpack.config.js --progress -dsiplay-module --colors --

display-reason'

然後在命令列裡執行npm run webpack,就會執行這段指令碼


複製程式碼

webpack單頁面，entry裡是一個入口檔案，如果是多個頁面，得用物件的形式傳入多個入口檔案

{
  entry: {
       app:'./src/app.js',
       search: './src/search.js'
  },
  output: {
       filename:'{name}.js',//'[name]-[hash].js'//[chunkhash]
       path:__dirname+'./built'，
       publicPath: 'http://cdn.com/'//js連線前就會加上這個地址，線上地址
}
}複製程式碼

webpack外掛

上下文概念：在module.exports裡會有一個預設屬性：context為整個執行環境上下文，預設值為根目錄

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

var htmlWebpackPlugin = require('html-webpack-plugin')

mudule.exports = {

plugins：【

new htmlWebpackPlugin({

template:'index.html',

filename:'index-[index-[hash].html'//這裡可以指定生成index檔案

inject:'head'//制定指令碼放在head還是body標籤裡

title:'webpack is good'//檔案標題

date: new Date()，