webpack4 入門配置研究

1. 全局安裝 npm install webpack webpack-cli webpack-dev-server -g

1.1）輸密文的密碼（電腦開機）
1.2）安裝成功

2. 輸入命令mkdir config dist src建立三個文件夾

3.輸入命令npm init -y

4. 輸入命令touch dist/index.html src/index.js分別dist和src文件夾下面建立一個index.html文件和index.js文件

5. webpack4.x中打包默認找src/index.js做爲默認入口，能夠直接在終端中輸入命令webpack 將當前的內容進行一個簡單的打包

5.1) 應該看到打包的時候終端中會出現黃色的警告提示

5.2)mode是webpack中獨有的，有兩種打包環境，一個是開發環境：development另一個是生產環境：production
打包的時候輸入webpack --mode=development或者webpack --mode=production就不會出現警告提示了
5.3)webapck --mode=production命令打包，這個是代碼壓縮過的,同時項目文件夾下面多了 一個node_modules文件夾

6.輸入命令touch config/webpack.dev.js建立文件

7. 輸入命令rm dist/main.js src/index.js移除掉這兩個文件咱們本身來配置

7.1) 如今在src文件夾下面建立main.js文件
7.2)進入到webpack.dev.js文件中進行配置，具體在代碼中註釋

7.3) 如今不能執行以前的webpack --mode="development"命令了會報下面的錯誤沒有放在src文件夾內；這裏是由於webpack4打包默認找的src下面的index.js入口，咱們前面已經刪除了，這裏src下面死main.js文件，因此找不到就報ERROR in Entry module not found: Error: Can't resolve './src' in '/Users/yubo/Desktop/www/study_webpack2'錯誤，因此這裏咱們到packsge.json裏面配置下命令，讓打包的時候執行咱們在config/webpack.dev.js下面配置的入口。

啓動配置

8.npm run build 就能夠了；

簡單配置 webpack.dev.js

module.exports = {
entry: ['./src/okcPages/okMainIndex.js', './src/units/remChange.js','./src/okcPages/initCp.js'],
output: {
publicPath: '/', //這裏要放的是靜態資源CDN的地址
path: path.resolve(__dirname, 'dist'),
filename: 'build.js' // 單文件輸出 ，若是多文件可在 entry :{} ,這裏 filename: '[name].js'
},
resolve: {
extensions: [".js", ".css", ".json"],
alias: {
// jquery: './src/units/jquery-1.83.min.js',
} //配置別名能夠加快webpack查找模塊的速度
},
externals: {
jquery: 'window.$'
},
module: {
// 多個loader是有順序要求的，從右往左寫，由於轉換的時候是從右往左轉換的
rules: [
{
test: /.css$/,
use: ExtractTextWebapckPlugin.extract({
fallback: 'style-loader',
use: ['css-loader'] // 再也不須要style-loader放到html文件內
}),
include: path.join(__dirname, 'src'), //限制範圍，提升打包速度
exclude: /node_modules/
},
{
test: /.jsx?$/,
use: {
loader: 'babel-loader',
query: { //同時能夠把babel配置寫到根目錄下的.babelrc中
presets: ['env', 'stage-0'] // env轉換es6 stage-0轉es7
}
}
},
{ //file-loader 解決css等文件中引入圖片路徑的問題
// url-loader 當圖片較小的時候會把圖片BASE64編碼，大於limit參數的時候仍是使用file-loader 進行拷貝
test: /.(png|jpg|jpeg|gif|svg)/,
use: {
loader: 'url-loader',
options: {
outputPath: 'images/', // 圖片輸出的路徑
limit: 1 * 1024
}
}
}
]
},
plugins: [
// 多入口的html文件用chunks這個參數來區分
/* new HtmlWebpackPlugin({
template: path.resolve(__dirname, 'src', 'index.html'),
filename: 'index.html',
hash: true,//防止緩存
minify: {
removeAttributeQuotes: true//壓縮 去掉引號
}
}),*/
new ExtractTextWebapckPlugin('css/build.css'), // 其實這個特性只用於打包生產環境，測試環境這樣設置會影響HMR
// new CleanWebpackPlugin([path.join(__dirname, 'dist')]),
],
devtool: 'eval-source-map', // 指定加source-map的方式
devServer: {
contentBase: path.join(__dirname, "dist"), //靜態文件根目錄
port: 3824, // 端口
host: 'localhost',
overlay: true,
compress: false // 服務器返回瀏覽器的時候是否啓動gzip壓縮
},
watch: true, // 開啓監聽文件更改，自動刷新
watchOptions: {
ignored: /node_modules/, //忽略不用監聽變動的目錄
aggregateTimeout: 500, //防止重複保存頻繁從新編譯,500毫米內重複保存不打包
poll: 1000 //每秒詢問的文件變動的次數
},

配置js壓縮

uglifyjs-webpack-plugin(JS壓縮插件，簡稱uglify) webpack4 已經集成；
const uglify = require('uglifyjs-webpack-plugin');
plugins:[
new uglify()
],
這個時候咱們再終端運行命令 npm run bulid 進行打包會提示下載webpack-cli 命令輸入yes

webpack都有哪些插件？

1.）html生成插件： html-webpack-plugin
2.）css分離的插件：extract-text-webpack-plugin new extractTextPlugin("css/index.css") //這裏的/css/index.css 是分離後的路徑
3.）處理HTML中的圖片：html-withimg-loader
4.）自動處理CSS3屬性前綴：postcss-loader 和 autoprefixer
5.）消除未使用的css 和js: purify-css purifycss-webpack
6.）copy 插件 ：copy-webpack-plugin
7.）編譯輸出文件前，刪除舊文件: clean-webpack-plugin
8.) 壓縮css，優化css結構，利於網頁加載和渲染 : optimize-css-assets-webpack-plugin
9.) 打包編譯時，顯示進度條: progress-bar-webpack-plugin
10.) 規範scss, less，css書寫規則:stylelint-webpack-plugin
11.) 將CSS解壓到單獨的文件中。它爲每一個包含CSS的JS文件建立一個CSS文件：webpack4用mini-css-extract-plugin 代替了 extract-text-webpack-plugin
12.）減小構建時間：webpack-parallel-uglify-plugin
13.）加快編譯速度：happypack
14.）資源路徑與問件名對應：assets-webpack-plugin
參考原文：http://www.javashuo.com/article/p-fukrwkdx-kc.html ；

1.路徑問題

var website ={
publicPath:"http://localhost:8888/"
// publicPath:"http://192.168.1.103:8888/"
}
聲明一個變量查找更快 publicPath:website.publicPath 使用webpack命令進行打包，你會發現原來的相對路徑改成了絕對路徑

2. 處理HTML中的圖片

在webpack中是不喜歡你使用標籤來引入圖片的，可是咱們做前端的人特別熱衷於這種寫法，國人也爲此開發了一個：html-withimg-loader。他能夠很好的處理咱們在html 中引入圖片的問題，如何把圖片放到指定的文件夾下html-withimg-loader；

npm install html-withimg-loader --save-dev
{
test: /.(htm|html)$/i,
use:[ 'html-withimg-loader']
}

3.）自動處理CSS3屬性前綴：postcss-loader 和 autoprefixer

postCSS推薦在項目根目錄（和webpack.config.js同級），創建一個postcss.config.js文件。

module.exports={
plugins: [
require('autoprefixer') //自動添加前綴插件
]
}
在webpack.dev.cnfig.js中配置：
{
test:/.css$/,
use: extractTextPlugin.extract({
fallback: "style-loader",
use:[{loader:"css-loader"},
{
loader:"postcss-loader",
},
]
})
},

4.消除未使用的CSS 安裝PurifyCSS-webpack

PurifyCSS-webpack要依賴於purify-css這個包，因此兩個都要下載
npm install purifycss-webpack purify-css --save-dev
由於咱們須要同步檢查html模板，因此咱們須要引入node的glob對象使用。在webpack.dev.config.js文件頭部引入glob
const glob = require('glob');
const PurifyCSSPlugin = require("purifycss-webpack");
new PurifyCSSPlugin({
//這裏配置了一個paths，主要是需找html模板，purifycss根據這個配置會遍歷你的文件，查找哪些css被使用了。
paths: glob.sync(path.join(__dirname, 'src/*.html')),
}),

注意： 使用這個插件必須配合extract-text-webpack-plugin這個插件

5)webpack bable 的配置；

npm install --save-dev babel-core babel-loader babel-preset-es2015 babel-preset-react
//babel 配置
{
test:/.(jsx|js)$/,
use:{
loader:'babel-loader',
options:{
presets:[
"es2015","react"
]
}
},
exclude:/node_modules/
}
5.1）通常是寫到.babelrc 文件夾裏
{
"presets": [
["env", {
"modules": false,
"targets": {
"browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
}
}],
"stage-0"
]
}
5.2）對比.webpack.dev.config.js裏的loader配置
babel 配置
{
test:/.(jsx|js)$/,
use:{
loader:'babel-loader',
},
exclude:/node_modules/
}

參考原文：簡書（素時年錦 ）webpack4.x入門配置