本文根據《入門Webpack，看這篇就夠了》實踐所寫
webpack使用前準備
1、npm init 在檔案根目錄建立一個pageage.json檔案，它是npm說明檔案，包括目前項目的依賴子產品，自定義的腳本任務等等
輸入這個指令後，終端會問你一系列諸如項目名稱，項目描述，作者等資訊，package name 一定不能是webpack，其他不重要可以一直按回車，
2、安裝Webpack
npm install –save-dev webpack 項目中安裝
npm install -g webpack 全局中安裝
- 3、建立兩個檔案夾 app
- Greeter.js
- main.js public
- index.html
webpack使用
經過測試，webpack必須要安裝在全局才可以使用
在終端直接使用： webpack app/main.js public/bundle.js
通過配置檔案使用： webpack
//webpack.config.js
module.exports = {
entry: __dirname + "/app/main.js",//已多次提及的唯一入口檔案
output: {
path: __dirname + "/public",//打包後的檔案存放的地方
filename: "bundle.js"//打包後輸出檔案的檔案名
}
}
使用webpack建構本地伺服器，自動重新整理顯示修改後的結果
安裝元件
npm install --save-dev webpack-dev-server
配置
//webpack.config.js
devServer: {
contentBase: "./public",//本地伺服器所加載的頁面所在的目錄
historyApiFallback: true,//不跳轉
inline: true//實時重新整理
}
//package.json
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "webpack",
"server": "webpack-dev-server --open"
}
使用
npm run server 在8080端口檢視
Loader
安裝需要的loader元件
npm install --save-dev css-loader
配置
//webpack.config.js
module: {
loaders: [
{
test: /\.css$/,
use:[//同一檔案引入多個loader必須要分開寫
{
loader: "style-loader"
},
{
loader:"css-loader"
},
{
loader: "postcss-loader",
options: { // 如果沒有options這個選項将會報錯 No PostCSS Config found
plugins: (loader) => [
require('autoprefixer')(), //CSS浏覽器相容
]
}
}
]
},
]
}
PostCSS
使用PostCSS來為CSS代碼自動添加适應不同浏覽器的CSS字首
安裝
//安裝postcss-loader 和 autoprefixer（自動添加字首的插件）
npm install --save-dev postcss-loader autoprefixer
配置
module: {
loaders: [
{//處理css
test: /\.css$/,
use:[//同一檔案引入多個loader必須要分開寫
{
loader: "style-loader"
},
{
loader:"css-loader"
},
{
loader: "postcss-loader",
}
]
},
]
}
// 建立的postcss.config.js檔案
module.exports = {
plugins: [
require('autoprefixer')
]
}
Babel
安裝依賴子產品
// 解析Es6的babel-preset-es2015包和解析JSX的babel-preset-react包
npm install --save-dev babel-core babel-loader babel-preset-es2015 babel-preset-react
配置
//webpack.config.js
module: {
rules: [
{//處理JS
test: /(\.jsx|\.js)$/,
use: {
loader: "babel-loader",
options: {
presets: [
"es2015", "react"
]
}
},
exclude: /node_modules/
}
]
}
也可以再單獨的檔案中進行配置
//建立的.babelrc檔案
{
"presets": ["react", "es2015"]
}
//webpack.config.js
module: {
rules: [
{
test: /(\.jsx|\.js)$/,
use: {
loader: "babel-loader"
},
exclude: /node_modules/
}
]
}
插件
BannerPlugin 内置插件
//給打包後的js檔案添加一個版權聲明
module.exports = {
...
module: {
rules: [
{
test: /(\.jsx|\.js)$/,
use: {
loader: "babel-loader"
},
exclude: /node_modules/
},
{
test: /\.css$/,
use: [
{
loader: "style-loader"
}, {
loader: "css-loader",
options: {
modules: true
}
}, {
loader: "postcss-loader"
}
]
}
]
},
plugins: [
new webpack.BannerPlugin('版權所有，翻版必究')
],
};
HtmlWebpackPlugin
作用：根據index.html模闆，自動生成一個自動引用你打包後的JS檔案的新index.html
安裝：
npm install --save-dev html-webpack-plugin
使用前提：
1.移除public
2.在app目錄下，建立一個index.tmpl.html檔案模闆，插件會依據此模闆生成最終的html頁面，會自動添加所依賴的 css, js，favicon等檔案
3.更新webpack的配置檔案，方法同上,建立一個build檔案夾用來存放最終的輸出檔案
配置：
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: __dirname + "/app/main.js",//已多次提及的唯一入口檔案
output: {
path: __dirname + "/build",
filename: "bundle.js"
},
...
module: {
rules: [
{
test: /(\.jsx|\.js)$/,
use: {
loader: "babel-loader"
},
exclude: /node_modules/
},
{
test: /\.css$/,
use: [
{
loader: "style-loader"
}, {
loader: "css-loader",
options: {
modules: true
}
}, {
loader: "postcss-loader"
}
]
}
]
},
plugins: [
new webpack.BannerPlugin('版權所有，翻版必究'),
new HtmlWebpackPlugin({
template: __dirname + "/app/index.tmpl.html"//new 一個這個插件的執行個體，并傳入相關的參數
})
],
};
使用：
//build檔案夾下面生成了bundle.js和index.html
執行 webpack
Hot Module Replacement
熱加載子產品: 在修改元件代碼後，自動重新整理實時預覽修改後的效果。
安裝react-transform-hmr：
npm install --save-dev babel-plugin-react-transform react-transform-hmr
配置檔案：
1、在webpack配置檔案中添加HMR插件；
2、在Webpack Dev Server中添加“hot”參數；
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: __dirname + "/app/main.js",//已多次提及的唯一入口檔案
output: {
path: __dirname + "/build",
filename: "bundle.js"
},
devtool: 'eval-source-map',
devServer: {
contentBase: "./public",//本地伺服器所加載的頁面所在的目錄
historyApiFallback: true,//不跳轉
inline: true,
hot: true//2、在Webpack Dev Server中添加“hot”參數
},
module: {
rules: [
{
test: /(\.jsx|\.js)$/,
use: {
loader: "babel-loader"
},
exclude: /node_modules/
},
{
test: /\.css$/,
use: [
{
loader: "style-loader"
}, {
loader: "css-loader",
options: {
modules: true
}
}, {
loader: "postcss-loader"
}
]
}
]
},
plugins: [
new webpack.BannerPlugin('版權所有，翻版必究'),
new HtmlWebpackPlugin({
template: __dirname + "/app/index.tmpl.html"//new 一個這個插件的執行個體，并傳入相關的參數
}),
new webpack.HotModuleReplacementPlugin()//1、在webpack配置檔案中添加HMR插件；
],
};
或者，在用react時隻要配置Babel：
// .babelrc
{
"presets": ["react", "es2015"],
"env": {
"development": {
"plugins": [["react-transform", {
"transforms": [{
"transform": "react-transform-hmr",
"imports": ["react"],
"locals": ["module"]
}]
}]]
}
}
}
使用：
每次儲存就能在浏覽器上看到更新内容
出現的報錯：
1、
解決：
此時指令行所在的檔案夾不是項目所在的檔案夾
2、npm err!errno -4048
解決：
關掉指令行使用管理者身份重新打開
![CSS樣式抽離之 extract-text-webpack-plugin 插件[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)