webpack特點(diǎn)
- webpack本質(zhì)上是nodejs的一個(gè)包涤伐，所以webpack是基于node.exe來運(yùn)行的
- 想要運(yùn)行webpack就必須要安裝node.exe
- webpakc是在開發(fā)階段要被程序員使用的骡湖，但是在生成環(huán)節(jié)中是用不到的(生產(chǎn)環(huán)節(jié)已經(jīng)打包壓縮好了)
如何安裝webpack
- 安裝node.exe的同事會(huì)自動(dòng)安裝好npm 包管理工具
- npm 包這個(gè)管理器下載的包是來源于國外雇初，所以速度回很慢，甚至出錯(cuò)
所以我們使用國內(nèi)taobao開發(fā)的一個(gè)cnpm來替代npm的使用
使用webpack之前的準(zhǔn)備工作
- 安裝node環(huán)境
- npm install cnpm -g 將cnpm全局安裝(使任何地方都可以使用)
- cnpm install webpack -g 將webpack安裝成為全局包
- cnpm install webpack --save-dev 當(dāng)前項(xiàng)目根目錄安裝webpack,給當(dāng)前項(xiàng)目使用
- npm init -y 當(dāng)前項(xiàng)目根目錄初始化npm,會(huì)有package.json
- 如果運(yùn)行 webpack 執(zhí)行webpack.config.js
- 如果要執(zhí)行webpack.develop.config.js,就運(yùn)行webpack --config
webpack.develop.config.js,當(dāng)然也可以在package.json中設(shè)置
{
"name": "01webpack",
"version": "1.0.0",
"description": "",
"main": "webpack.config.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
//可以直接命令運(yùn)行npm run develop 來執(zhí)行webpack.develop.config.js文件
"develop": "webpack --config webpack.develop.config.js"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"babel-loader": "^7.1.0",
"less": "^2.7.2",
"less-loader": "^4.0.4",
"node-sass": "^4.5.3",
"sass-loader": "^6.0.6",
"webpack": "^3.0.0",
"webpack-dev-server": "^2.5.0"
}
}
學(xué)習(xí)nodejs的模塊化開發(fā)(main.js依賴calc.js寫法）
1、在nodejs中一切.js文件都可以是一個(gè)模塊
2、calc.js
function add(x,y){return x + y;}
module.exports = add;
3认境、main.js使用calc.js中的add方法
導(dǎo)calc.js模塊
// webpack的入口文件
var add = require('./calc.js');
// console.log(add(2,3));
// 獲取到頁面上面所有dom對(duì)象
var v1obj = document.getElementById('v1');
var v2obj = document.getElementById('v2');
var btobj = document.getElementById('bt');
var resobj = document.getElementById('res');
btobj.onclick = function(){
// 實(shí)現(xiàn)一個(gè)加法功能
var v1Val = (v1obj.value - 0);
var v2Val = (v2obj.value - 0);
resobj.value = add(v1Val,v2Val);
}
webpack的基本使用方式
- 第一種使用方式：webpack 入口文件.js的路徑 輸出文件.js的路徑
在當(dāng)前要打包的入口.js文件的位置打開cmd ，輸入 webpack 入口文件.js 輸出文件.js
- 第二種使用方式：webpack 結(jié)合 webpack.config.js 配置文件進(jìn)行打包
目的：在cmd面板中直接利用 webpack指令即可進(jìn)行打包挟鸠，
特點(diǎn)：如果直接指向 webpack 指令叉信，webpack指令會(huì)自動(dòng)去查找當(dāng)前目錄下的webpack.config.js文件
編寫步驟：
1、webpack.config.js中定義入口文件和輸出文件的 內(nèi)容
module.exports={
entry:path.resolve(__dirname,'src/main.js'), ---main.js的路徑
output: {
path: path.resolve(__dirname, 'dist'), ---自己創(chuàng)建的dist文件夾,用來放bundle.js
filename: 'bundle.js',
},
2艘希、在與webpack.config.js文件相同的目錄下打開cmd硼身，執(zhí)行webpack即可完成打包
利用webpack完成 css文件的打包
-
利用webpack完成 css文件的打包
注意點(diǎn)：webpack是利用style-loader和css-loader這兩個(gè)nodejs的包來完成.css文件的打包工作
步驟：
1、cnpm i style-loader css-loader 安裝本地包
style-loader與css-loader會(huì)依賴于其他的很多包覆享，所以一般我們?cè)趯⑦@個(gè)項(xiàng)目文件發(fā)送給其他人使用的時(shí)候佳遂，是要?jiǎng)h除 node_modeuls這個(gè)文件夾的，這時(shí)候就有可能不知道這個(gè)項(xiàng)目中依賴于哪些第三方包解決方案： node.exe中提供了一個(gè) package.json文件用來存放當(dāng)前安裝的所有包撒顿， 這些包分為： 1丑罪、開發(fā)階段使用的包 cnpm i 包名稱 --save-dev --save-dev對(duì)應(yīng)的是package.json devDependencies節(jié)點(diǎn) 2、生產(chǎn)環(huán)境階段使用的包 cnpm i 包名稱 --save --save對(duì)應(yīng)的是package.json dependencies節(jié)點(diǎn) 保存的步驟： 1凤壁、利用 cnpm init 來生成一個(gè) package.json文件 2吩屹、cnpm i style-loader css-loader --save-dev 2、將style-loader與css-loader配置在 webpack.config.js中拧抖，webpack才能使用這兩個(gè)loader文件 webpack.config.js中定義入口文件和輸出文件的 內(nèi)容(見最后webpack.config.js的配置)
利用webpack完成 sass文件的打包
步驟：
1煤搜、cnpm install sass-loader node-sass --save-dev
2、sass-loader 在webpack.config.js中增加一個(gè) loader節(jié)點(diǎn)
注意點(diǎn)： sass文件的打包依賴于 sass-loader 解析成原生的 .css語法
所以要最終打包成功就必須要依賴于style-loader css-loader
所以在配置 sass的時(shí)候唧席，
style-loader!css-loade!sass-loader
{
test:/\.scss$/, //表示當(dāng)前要打包的文件的后綴正則表達(dá)式
loader:'style-loader!css-loader!sass-loader' //實(shí)現(xiàn)sass文件的打包
}
利用webpack完成 less文件的打包
步驟：
1擦盾、cnpm install less-loader less --save-dev
2、less-loader 在webpack.config.js中增加一個(gè) loader節(jié)點(diǎn)
注意點(diǎn)： 在配置 loader:'' 對(duì)應(yīng)的loader的時(shí)候袱吆，要
按照 style-loader!css-loade!less-loader 配置
利用webpack完成 url()導(dǎo)入資源文件的打包
例如需求：
background-image: url(../imgs/home.png)
那么webpack必須利用 url-loader 這個(gè)包去解析厌衙，而url-loader依賴file-loader，所以
步驟：
1绞绒、npm i url-loader file-loader --save-dev
2婶希、url-loader在webpack.config.js中增加一個(gè) loader節(jié)點(diǎn)
利用webpack完成 es6轉(zhuǎn)es5
步驟：
1、npm install babel-core babel-loader babel-preset-es2015 babel-plugin-transform-runtime --save-dev
注意：babel-plugin-transform-runtime 安裝是為了在后面能夠正常編譯.vue這個(gè)文件不出錯(cuò)
main.js配置
// webpack的入口文件
// 在此處main.js實(shí)現(xiàn)的是獲取到dom對(duì)象蓬衡，實(shí)現(xiàn)一個(gè)加法功能
var add = require('./calc.js');
// 導(dǎo)入site.css 以后webpack才能將site.css打包
require('./1.css');
require('./site1.scss');
require('./site2.less');
// console.log(add(2,3));
// 獲取到頁面上面所有dom對(duì)象
var v1obj = document.getElementById('v1');
var v2obj = document.getElementById('v2');
var btobj = document.getElementById('bt');
var resobj = document.getElementById('res');
btobj.onclick = function(){
// 實(shí)現(xiàn)一個(gè)加法功能
var v1Val = (v1obj.value - 0);
var v2Val = (v2obj.value - 0);
resobj.value = add(v1Val,v2Val);
}
webpack.config.js配置
var path = require('path');
module.exports = {
entry:path.resolve(__dirname,'src/main.js'),
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js',
},
module:{
loaders:[
{
// 將當(dāng)前項(xiàng)目中所有的.js文件都要進(jìn)行es6轉(zhuǎn)es5操作喻杈，node_moudels除外
test:/\.js$/, //表示當(dāng)前要打包的文件的后綴正則表達(dá)式
// loader:'babel-loader?presets[]=es2015', //如果寫到這里彤枢，將來在打包.vue文件的時(shí)候會(huì)報(bào)錯(cuò)，表示先利用css-loader解析.css文件筒饰，再調(diào)用style-loader打包
loader:'babel-loader',
exclude:/node_modules/ , //node_modules中的所有.js文件不去轉(zhuǎn)換缴啡，提高打包性能
},
{
// 打包c(diǎn)ss文件
test:/\.css$/, //表示當(dāng)前要打包的文件的后綴正則表達(dá)式
loader:'style-loader!css-loader' //表示先利用css-loader解析.css文件，再調(diào)用style-loader打包
},
{
// 打包 sass文件
test:/\.scss$/, //表示當(dāng)前要打包的文件的后綴正則表達(dá)式
loader:'style-loader!css-loader!sass-loader' //實(shí)現(xiàn)sass文件的打包
},
{
// 打包less文件
test:/\.less$/, //表示當(dāng)前要打包的文件的后綴正則表達(dá)式
loader:'style-loader!css-loader!less-loader' //實(shí)現(xiàn)sass文件的打包
},
{
// 打包url()請(qǐng)求的資源文件
test:/\.(png|jpg|gif|ttf)$/, // 注意url可能請(qǐng)求多個(gè)資源瓷们，所以將來在項(xiàng)目中通過url導(dǎo)入的資源擴(kuò)展名必須配置在這里
// loader:'url-loader' //這種配置會(huì)將圖片變成一個(gè)base64的字符串存儲(chǔ)到build.js中业栅，如果圖片很大的話，那么會(huì)造成build.js也比較大谬晕，加載的時(shí)候會(huì)導(dǎo)致效率低下
loader:'url-loader?limit=40000' //限制圖片的大小如果<40k則把他當(dāng)做base64字符串存儲(chǔ)到build.js中碘裕，如果>40k 則單獨(dú)將圖片存放到磁盤上，將路徑打包進(jìn)去bulid.js
}
]
},
babel:{
presets: ['es2015'],
plugins: ['transform-runtime'] //這句代碼就是為了解決打包.vue文件不報(bào)錯(cuò)
}
}
