webpack4.x 各項簡單配置
1.webpacks是什麼？
是模塊打包機，分析目錄結構，找到js模塊（包括了瀏覽器不能直接識別的代碼如，typescript、sass），打包成合適的格式，供遊覽器訪問。
優勢：模塊打包，和構建項目
打包的優勢：
- 1.模塊化，拆分了業務的複雜的js代碼
- 2.js擴展了==》基於原型==》基於class（typescript，es6）
面試：webpack、grunt、gulp不同：grunt、gulp優化流程的工具，webpack模塊化支持工具，兼有優化流程功能
2.webpack4.x安裝
- 1.先全局安裝 npm install webpack -g ;npm install webpack-cli -g
- 2.再npm init 生成package.json
- 3.局部安裝
npm install webpack -S
npm install webpack-cli S - 4.webpack –mode production(生產環境)
webpack –mode development(開發環境)
3.配置
1.webpack四個核心概念
入口(entry)
輸出(output)
loader:
webpack支持js，不支持css和html，讓webpack支持，則需要loader 而palugins可以有效打包或壓縮css，js，html，圖片。插件(plugins)
[默認配置
sr
index.js
dist
main.js]2.配置文件
1.DevServe
r
首先是安裝devserver：npm install webpack-dev-server -D;
然後在webpack.config.js中配置
devServer:{
contentBase:"./public",//選擇服務器路徑,即服務器根目錄選擇
host:'localhost',//服務器地址
port:"3000",//端口
inline:true//實時刷新
}
2.在package.json
配置：
“scripts”: {
"start": "webpack-dev-server --open"//webpack-dev-server --open --inline(這個也是可以的，做到實時刷新)},
3.loader：加載程序
1.引入css需要
style-loader css-loader 安裝:npm install style-loader css-loader -D(s); 同時css若有圖片加載，光有style-loader，和css-loader還不行，還需要有file-loader file-loader安裝：install file-loader -D 2.loader配置 module: { rules: [ { test: /\.css$/, use:['style-loader','css-loader'] },//正則，表示後綴爲css的文件 { test: /(\.jpg|\.png|\.jpeg|\.gif)$/, use:['file-loader']}//同理...... ] } 3.html-withimg-loader 使得打包的html支持圖片 安裝：npm install html-withimg-loader -D(S); 配置：{test:/\.html$/,use:'html-withimg-loader'} 4.字體圖標 使用的是file-loader 配置：{test: /\.(woff|ttf|svg|eot|xttf|woff5)$/, use:'file-loader?limit=1024&name=./fonts/[name].[ext]'}//後面的參數，limit是限制文件大小，name是指定打包到哪個文件，同時指明打包文件名字，類型4.插件
html-webpack-plugin
src:一般是開發階段
public:一般是生產階段[一般這2個階段文件要對應]
1.安裝 html-webpack-plugin 安裝命令：npm install html-webpack-plugin -D(S) 2.配置html-webpack-plugin 第一步：引入html-webpack-plugin== >const HtmlWebpackPlugin = require('html-webpack-plugin'); 第二步：配置 plugins: [ //new webpack.optimize.UglifyJsPlugin(), new HtmlWebpackPlugin({ template: './src/index.html', filename: 'a.html'//改html的輸出文件名index.html改爲了a.hmtl, minify:{ removeAttributeQuotes:true,//去除引號 removeComments:true//去除註釋 removeEmptyAttributes:true//去除空屬性 collapseWhitespace:true//去除空格 } }) ]5.css提取
插件下載：npm intall extract-text-webpack-plugin@next -D(s); const ExtractTextPlugin=require("extract-text-webpack-plugin") 配置 new ExtractTextPlugin('./css/[name].css'); 同時要對style-loader和css.loader進行改造==> module: { rules: [ { test: /\.css$/, use:ExtractTextPlugin.extract({ fallback:'style-loader', use:[{ loader:'css-loader?name=./css/[name].[ext]', options:{ minimize:true,//代碼壓縮 } }], publicPath;"../" })}, ] },6.babel
核心：babel-core 功能：babel-loader babel-preset-env babel-preset-react 安裝：npm install babel-core babel-loader babel-preset-env babel-preset-react -S 配置(一)： { test:/\.(jsx|js)$/, use:{ loader:'babel-loader', options:{ presets:['env','react'] } }, exclude:/node_modules/ //排除不編譯node_modules文件 } 配置(二)： 在根目錄下建一個.babelrc文件 再在其文件中寫人{"presets":['env','react']} 在webpack.config.js下寫入： { test:/\.(jsx|js)$/, use:{ loader:'babel-loader' }, exclude:/node_modules/ //排除不編譯node_modules文件 }7.引入第三方文件
在4.0中極大簡化了配置。 (1)安裝jq：npm install jquery -D (2)在入口js文件 import $ from 'jquery';即可，非常簡單