準備開始
webpack3.0 的安裝
之前在很多網(wǎng)站上尋找webpack3.0的知識威鹿，但是結(jié)果都不理想惧互。經(jīng)過很多努力鳍刷，終于學到了一些知識，現(xiàn)在把這些知識分享出來吧理盆。（希望能對小伙伴有所幫助）
全局安裝
1.jpg
2.jpg
3.jpg
4.jpg
局部安裝
5.jpg
更新webpack
6.jpg
webpack.config.js基本介紹
const path=require('path');
module.exports={ //模塊導(dǎo)出
entry:{
entry:'./src/entry.js',
entry2:'./src/entry2.js'
},//入口配置項
output:{
path:path.resolve(__dirname,'dist'),//會把一個路徑或路徑片段的序列解析為一個絕對路徑痘煤。
filename:'[name].js'
},//出口配置項
module:{},//模塊
plugins:[],//插件
devServer:{
contentBase:path.resolve(__dirname,'dist'),//熱更新，基本目錄結(jié)構(gòu)
host:'10.117.44.130',//主機IP地址
compress:true,//服務(wù)器壓縮參數(shù)猿规，true（壓縮）衷快，false
port:1717
},//開發(fā)服務(wù)
}
熱更新
- 利用npm下載webpack-dev-server；
- 修改package.json姨俩；
-
啟用熱更新蘸拔。（具體內(nèi)容如下圖所示）
7.jpg
8.jpg
9.jpg
打包CSS文件
用npm下載css-loader和style-loader： css-loader對CSS樣式、標簽進行處理环葵，style-loader對CSS中的url進行處理调窍。
webpack.config.js中的module：
module:{ rules:[ //規(guī)則 { test:/\.css$/, //用正則表達式來找到要處理的文件擴展名 use:['style-loader','css-loader'] //要用到的loader } ] },//模塊`-
知識擴展：
module:{ rules:[ //規(guī)則 { test:/\.css$/, //用正則表達式來找到要處理的文件擴展名 use:['style-loader','css-loader'] //這是第一種寫法//要用到的loader //loader:['style-loader','css-loader'] //這是第二種寫法 /*use:[{ loader:'style-loader' },{ loader:'css-loader' }]*/ //這是第三種寫法（最常用） } ] },//模塊
JS代碼壓縮
-
第一步：
const uglify=require('uglifyjs-webpack-plugin');//引入uglify.js 第二步：
plugins:[ new uglify() ],//插件
HTML文件打包
-
引入插件
const htmlPlugin=require('html-webpack-plugin');//需要安裝 -
安裝插件
npm install --save-dev html-webpack-plugin
持續(xù)更新中......
如果哪里有錯誤，歡迎小伙伴指正张遭。--------------
意見反饋-郵箱：1521274537@qq.com
