全局安裝
cnpm install webpack -g
初始化packet.json文件
cnpm init
項(xiàng)目里安裝
cnpm install webpack
//cnpm install webpack-cli 最好安裝
本地項(xiàng)目目錄創(chuàng)建配置文件
webpack.config.js
安裝 html-webpack-plugin模塊和一些需要的loader
這允許你打包除 JavaScript 之外的任何靜態(tài)資源.
Loaders 需要單獨(dú)安裝并且需要 在webpack.config.js 下的 modules 關(guān)鍵字下進(jìn)行配置，Loaders 的配置選項(xiàng)包括以下幾方面：
test : 一個(gè)匹配 Loaders 所處理的文件的拓展名的正則表達(dá)式（必須）
loader： loader 的名稱（必須）
include/exclude: 手動(dòng)添加必須處理的文件/文件夾,或屏蔽不需要處理的文件/文件夾（可選）
options：為 Loaders 提供額外的設(shè)置選項(xiàng)（可選）
//安裝html-webpack-plugin模塊
cnpm install html-webpack-plugin
//安裝css-loader和style-loader
cnpm install --save-dev css-loader style-loader
//安裝轉(zhuǎn)換es6語法的模塊
//cnpm install --save-dev babel-core babel-loader babel-preset-es2015
//babel-preset-es2015已經(jīng)被廢棄羞海，取而代之的是babel-preset-env；
cnpm install babel-loader babel-core babel-preset-env
配置服務(wù)器熱響應(yīng)
想不想讓你的瀏覽器監(jiān)測(cè)你修改的代碼右蒲，并自動(dòng)刷新修改后的結(jié)果.其實(shí) Webpack 提供一個(gè)可選的本地開發(fā)服務(wù)器，這個(gè)本地服務(wù)器基于 node.js 構(gòu)建滚朵，可以實(shí)現(xiàn)你想要的這些功能蛉拙，不過它是一個(gè)單獨(dú)的組件，在 Webpack 中進(jìn)行配置之前需要單獨(dú)安裝它作為項(xiàng)目依賴.在終端中輸入下面的指令安裝對(duì)應(yīng)組件.建議同時(shí)全局安裝和安裝到你的項(xiàng)目目錄
首先全局安裝
cnpm install -g webpack-dev-server
安裝到你的項(xiàng)目目錄
cnpm install --save-dev webpack-dev-server
//
devserver 作為 Webpack 配置選項(xiàng)中的一項(xiàng)画舌，具有以下配置選項(xiàng)
contentBase 默認(rèn) webpack-dev-server 會(huì)為根文件夾提供本地服器，
如果想為另外一個(gè)目錄下的文件提供本地服務(wù)器已慢，
應(yīng)該在這里設(shè)置其所在目錄（本例設(shè)置到“public"文下）.
port 設(shè)置默認(rèn)監(jiān)聽端口曲聂，如果省略，默認(rèn)為"8080".
inline 設(shè)置為 true佑惠，當(dāng)源文件改變時(shí)會(huì)自動(dòng)刷新頁面.
historyApiFallback 在開發(fā)單頁應(yīng)用時(shí)非常有用朋腋，
它依賴于 HTML5 history API，如果設(shè)置為 true膜楷，所有的跳轉(zhuǎn)將指向index.html.
編輯 webpack.config.js 文件配置以上選項(xiàng).
例如
devServer: {
contentBase: "./public",
port: "9000",
inline: true,
historyApiFallback: true,
}
添加快捷啟動(dòng)
編輯 package.json 文件 scripts 選項(xiàng).
"scripts": {
"start": "webpack-dev-server --hot --inline"
},
在webpack.config.js中配置相關(guān)內(nèi)容
//定義了一些文件夾的路徑
var path = require("path");//引入path模塊
var webpack = require("webpack"); //引入webpack模塊
var ROOT_PATH = path.resolve(__dirname);
var APP_PATH = path.resolve(ROOT_PATH, 'app');
var Pro_PATH = path.resolve(ROOT_PATH, 'project');
//引入html模板文件
var htmlwebpackplugin = require("html-webpack-plugin");
module.exports={
mode: 'production',//生產(chǎn)環(huán)境旭咽，會(huì)自動(dòng)壓縮代碼 development 開發(fā)環(huán)境
entry:app_path, //入口文件
output:{ //出口文件
path:build_path, //存放打包后文件的地方路徑
filename:"build.js" //打包后的文件名
},
//熱響應(yīng)相關(guān)的參數(shù)
devServer: {
contentBase: "./public",
port: "9000",
inline: true,
historyApiFallback: true,
},
//需要加載的一些loader,在webpack4，loaders已經(jīng)改為rules
module:{
rules:[ //css和style的loader
{
test:/\.css$/,
loaders:["style-loader","css-loader"],
include: APP_PATH
},
{ //js的loader（解析es6）
test:/\.js$/,
loader:["babel-loader"],
include: APP_PATH,
query: {
presets: ['preset-env']
}
}
]
},
//配置模板文件
plugins:[
new htmlwebpackplugin({
title:"首頁",
template:"./app/template.html" //模板文件的路徑
})把将，
new webpack.ProvidePlugin({ //配置全局的第三方插件,如果你需要的話
$: "jquery",
jQuery: "jquery",
"window.jQuery": "jquery"
})
]
}
如果想配置多文件的入口
參考
var path = require('path');
var webpack = require("webpack");
var HtmlwebpackPlugin = require('html-webpack-plugin');
//定義了一些文件夾的路徑
var ROOT_PATH = path.resolve(__dirname);
var APP_PATH = path.resolve(ROOT_PATH, 'app');
var Pro_PATH = path.resolve(ROOT_PATH, 'project');
var COMMON = path.resolve(ROOT_PATH, 'public');
var BUILD_PATH = path.resolve(ROOT_PATH, 'build');
module.exports = {
mode: 'production',
//項(xiàng)目的文件夾 可以直接用文件夾名稱 默認(rèn)會(huì)找index.js 也可以確定是哪個(gè)文件名字
entry: {
index:APP_PATH+"/index.js",
Pro1:Pro_PATH+"/Pro1.js",
com:COMMON+"/common.js"
},
//輸出的文件名 合并以后的js會(huì)命名為bundle.js
output: {
path: BUILD_PATH,
filename: '[name].[hash].js'//添加hash值來防止js文件的緩存
},
//配置服務(wù)器熱響應(yīng)
devServer: {
historyApiFallback: true,
hot: true,
inline: true,
contentBase: "./app"
},
module: {//配置loader
rules: [
{
test: /\.css$/,
use: [ 'style-loader', 'css-loader' ]
}轻专，
{
test: /\.(png|jpg)$/,
loader: 'url?limit=40000'
},
{//配置的es6轉(zhuǎn)換規(guī)則
test: /\.js?$/,
loader: 'babel-loader',
include: APP_PATH,
options: {
presets: ['preset-env']
}
},
]
},
//添加我們的插件 會(huì)自動(dòng)生成一個(gè)html文件
plugins: [
new HtmlwebpackPlugin({
title: '首頁',
template: path.resolve(APP_PATH, 'index.html'),
filename: 'index.html',
//chunks這個(gè)參數(shù)告訴插件要引用entry入口里面的哪個(gè)文件
chunks: ["index","com"],
//要把script插入到標(biāo)簽里
inject: 'body'
}),
new HtmlwebpackPlugin({
title: '子頁面',
template: path.resolve(Pro_PATH, 'Pro1.html'),
filename: 'Pro1.html',
chunks: ["Pro1","com"],
inject: 'body'
}),
//配置全局的jquery或者第三方插件庫
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery",
"window.jQuery": "jquery"
})
]
};
實(shí)例（單純壓縮js）
//引入html-webpack-plugin
var htmlwebpackplugin = require("html-webpack-plugin");
var path = require("path");
module.exports = {
entry:{
index:__dirname+"/dist/index.js",
information:__dirname+"/dist/infomation.js",
detail:__dirname+"/dist/detail.js"
},
output:{
path:__dirname+"/build",
filename:"[name].js"
},
module:{
loaders:[
{
test:/\.js$/,
loaders:["babel-loader"],
exclude: path.resolve(__dirname,'/app/')
}
]
}
}
