webpack轻松入门教程
webpack之傻瓜式教程及前端自動(dòng)化入門
接觸webpack也有挺長一段時(shí)間了，公司的項(xiàng)目也是一直用著webpack在打包處理，但前幾天在教新人的情況下，遇到了一個(gè)問題，那就是：盡管網(wǎng)上的webpack教程滿天飛，但是卻很難找到一個(gè)能讓新人快速入手的、接地氣的、傻瓜式的教程，自己手把手教又太浪費(fèi)時(shí)間。想了一想，決定自己寫一篇webpack的傻瓜式教程，旨在教會(huì)尚未了解webpack的人迅速入手懂得基本原理，而不是懵逼一昧用著老員工搭好的環(huán)境天天敲著“webpack -p -w”卻不知這到底是干嘛的。
?
對(duì)于webpack的概念、用途、好處等等一律省略，想了解的上網(wǎng)搜索即可，這里直接演示如何新建一個(gè)webpack的實(shí)例。
?
1、安裝好nodejs，安裝過程網(wǎng)上找。
?
2、在D盤、E盤或任意一個(gè)磁盤中新建文件夾，命名為webpack_demo：
?
3、在webpack_demo文件下按住Shift鍵后點(diǎn)擊鼠標(biāo)右鍵，再左鍵點(diǎn)擊“在此處打開命令行窗口”：
在打開的命令行窗口中鍵入：
npm initname表示項(xiàng)目名，version表示版本等等，不一一贅述了，看字段很容易明白，一一填完或直接一路按回車鍵，最后出現(xiàn)“is this ok？”時(shí)，敲擊回車鍵后webpack_demo的文件夾下便生成了package.json文件。
?
4、在命令行中分別執(zhí)行以下命令，安裝對(duì)應(yīng)的插件（--save-dev作用是安裝的插件的同時(shí)，將插件名寫入package.json的devDependencies列表中）：
npm install webpack --save-devnpm install jquery --save-devnpm install style-loader css-loader --save-devnpm install extract-text-webpack-plugin –-save-dev安裝完成后package.json的代碼如下（name、version、description等都是在npm init步驟中手動(dòng)添加而成）：
{"name": "webpackdemo","version": "1.0.0","description": "a webpack demo","main": "index.js","scripts": {"test": "echo \"Error: no test specified\" && exit 1"},"author": "liqiyuan","license": "ISC","devDependencies": {"css-loader": "^0.26.1","extract-text-webpack-plugin": "^1.0.1","jquery": "^3.1.1","style-loader": "^0.13.1","webpack": "^1.14.0"} }?
5、此時(shí)查看webpack_demo文件夾，會(huì)發(fā)現(xiàn)多出了一個(gè)文件夾：
雙擊打開，文件夾下的內(nèi)容如下：
說明所需要的插件都已安裝成功。
?
6、在webpack_demo文件下新建文件webpack.config.js：
編輯代碼如下：
var ExtractTextPlugin = require("extract-text-webpack-plugin"); module.exports = {entry: './js/main.js',output: {path: './dist',filename: 'bundle.js'},plugins: [new ExtractTextPlugin('./style.css')],module: {//加載器配置loaders: [{ test: /\.css$/, loader:ExtractTextPlugin.extract("style-loader","css-loader")}// { // test: /\.(png|jpg)$/,// loader: 'url-loader?limit=8192'// }]} };以上代碼的意思是：
引入extract-text-webpack-plugin這個(gè)插件（用于支持打包c(diǎn)ss文件，默認(rèn)只支持打包js文件），讀取當(dāng)前目錄下js文件夾中的main.js（入口文件）內(nèi)容，把對(duì)應(yīng)的js和css文件打包，打包后的文件放入當(dāng)前目錄的dist文件夾下，打包后的css文件命名為style.css，打包后的js文件名為bundle.js。
?
7、webpack_demo下新建js文件夾，里面新建main.js，代碼編輯如下：
require('./index/index.js'); require('./index/index2.js');require('../css/index/index1.css'); require('../css/index/index2.css'); require('../css/common/public.css');以上代碼意思為：引入當(dāng)前目錄index文件夾下的index.js，index2.js，引入上一層目錄css文件夾下index文件下的index1.css，index2.css和common文件夾下的public.css。
?
8、新建上一步中對(duì)應(yīng)路徑的css、js、index、common文件夾，里面分別新建對(duì)應(yīng)的css或js文件，每個(gè)css、js文件里寫入不同的代碼。
?
9、窗口命令行中執(zhí)行代碼：
webpack出現(xiàn)如下提示索命打包成功：
此時(shí)打開webpack_demo文件夾，發(fā)現(xiàn)多了dist文件夾，打開，里面文件如下：
?
10、新建一個(gè)index.html文件，只引入bundle.js和style.css：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>webpack教程</title><meta http-equiv="X-UA-Compatible" content="IE=edge"/><meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable = no"/><link rel="stylesheet" type="text/css" href="./dist/style.css"> </head> <body><div>webpack</div><script src="./dist/bundle.js"></script> </body> </html>雙擊用瀏覽器打開這個(gè)html，會(huì)發(fā)現(xiàn)入口文件main.js里面引入的所有js和css文件都已經(jīng)執(zhí)行了。
?
----------------------------------------------?我是分割線----------------------------------------------?
?
上邊是webpack的基本用法，可見它的基本作用是把一堆js和css壓縮成一個(gè)js和css，但其實(shí)它的用法遠(yuǎn)不僅如此，這里再說兩個(gè)常見的用法：
1、自動(dòng)加css3前綴。
我們?cè)趯懸恍ヽss3的樣式時(shí)，為了良好的兼容性，往往會(huì)把css3代碼寫成如下這個(gè)樣子：
.test{display: flex;display: -webkit-box;display: -ms-flexbox; }如果每個(gè)css3的代碼都要手動(dòng)寫一堆前綴，那不僅要奔潰還容易出錯(cuò)，這種事情還是交給工具來干，會(huì)效率和靠譜的多。
2、ES6轉(zhuǎn)碼。
ES6將會(huì)是以后的趨勢(shì)了，但兼容性很差，轉(zhuǎn)碼后兼容性就大大提高了。
?
下面通過另一個(gè)小demo，把這一串東西給跑起來。
demo示例文件結(jié)構(gòu)如下：
文件目錄結(jié)構(gòu)就不畫圖了，文字說明：
app：開發(fā)文件（編譯前的文件）
css：手動(dòng)編寫的css文件集
css-entry.js：css入口文件，即說明需要打包哪些css文件
index.css：css示例文件1
index2.css：css示例文件2
js：手動(dòng)編寫的js文件集
index.js：js示例文件1
index.js：js示例文件2
dist：生產(chǎn)文件（編譯后的文件）
css：編譯后生成的css文件集
bundle.css：編譯后生成的css文件，可直接引入使用
css.js：編譯后生成的另一種css文件的用法，可先不管
js：編譯后生成的jss文件集
bundle.js：編譯后生成的js文件，可直接引入使用
node_modules：webpack自動(dòng)安裝的各依賴包，不用管
package,json：配置文件，主要告訴電腦需要安裝哪些依賴包
postcss.config.js：css3自動(dòng)添加前綴的配置文件
webpack.config.js：webpack的配置文件
?
這個(gè)是什么意思呢，就是我們把自己寫好的代碼分別放進(jìn)app的css和js文件夾里，打包以后，webpack會(huì)自動(dòng)的將代碼進(jìn)行添加css3前綴、打包壓縮、ES6轉(zhuǎn)碼等全部搞定后，將處理好的代碼文件生成在dist的css和js里，我們?cè)趆tml里直接引用處理好以后的代碼就行。
?
demo實(shí)戰(zhàn)：
1、按上邊的目錄結(jié)構(gòu)一一將文件新建好，node_modules除外。
2、編寫package.json，寫明需要安裝哪些依賴包，這些依賴包分別是干嘛的不一一說明了，想了解詳細(xì)的可以直接復(fù)制依賴包名稱去百度上搜。
{"name": "webpack","version": "1.0.0","description": "webpack, es6, css autoprefixer","author": "liqiyuan","license": "ISC","devDependencies": {"autoprefixer": "^7.1.1","babel-core": "^6.24.1","babel-loader": "^7.0.0","babel-polyfill": "^6.23.0","babel-preset-env": "^1.6.1","css-loader": "^0.28.1","extract-text-webpack-plugin": "^2.1.0","postcss-loader": "^2.0.5","style-loader": "^0.17.0","webpack": "^2.5.1"} }3、編寫webpack.config.js
// ES6轉(zhuǎn)碼和打包打包 // module.exports = { // entry: [ // 'babel-polyfill', // 添加了這個(gè)東西，才能完美的將ES6轉(zhuǎn)碼 // './app/js/index.js', // 進(jìn)行轉(zhuǎn)碼的js文件1 // './app/js/index2.js', // 進(jìn)行轉(zhuǎn)碼的js文件2 // ], // output: { // path: __dirname + '/dist/js', // 編譯后的js文件輸出目錄 // filename: 'bundle.js' // 編譯后的js文件名 // }, // module: { // loaders: [ // { // test: /\.jsx?$/, // loader: 'babel-loader', // 'babel-loader'也可寫成'babel' // query: { // presets: ['env'] // } // } // ] // } // };// CSS自動(dòng)添加前綴并打包 const ExtractTextPlugin = require("extract-text-webpack-plugin"); const extractCSS = new ExtractTextPlugin({filename: './bundle.css', // 編譯后生成的css文件名disable: false,allChunks: true }); module.exports = {entry: {app: ['./app/css/css-entry.js'], // 需要進(jìn)行打包處理的css入口文件},output: {path: __dirname + '/dist/css', // 編譯后生成的css文件輸出目錄filename: 'css.js'},module: {rules: [{test: /\.css$/,use: extractCSS.extract({fallback: "style-loader",use: ['css-loader', 'postcss-loader']})}]},plugins: [extractCSS] }
4、根目錄下打開命令行窗口，輸入“cnpm install”，即可按照package.json的配置內(nèi)容自動(dòng)安裝所需插件（使用cnpm之前要先把淘寶鏡像安裝一下：npm install -g cnpm --registry=https://registry.npm.taobao.org），不然就用“npm install”。安裝完成后，根目錄下會(huì)生成一個(gè)文件夾node_modules，這就是安裝好的依賴包。
5、編輯postcss.config.js，這是css3自動(dòng)添加前綴所需要的配置文件
module.exports = {plugins: [require('autoprefixer')({browsers:['last 5 versions']})] }6、編輯app/css下面的css文件
index.css（css示例文件1）
index2.css（css示例文件2）
css-entry.js（css入口文件，即說明需要打包哪些css文件）
require('./index.css'); require('./index2.css');7、命令行中輸入“webpack”。
8、神奇的情況發(fā)生，根目錄下會(huì)生成dist文件夾，dist下有css文件夾，css下有bundle.css，打開bundle.css：
發(fā)現(xiàn)木有，本來index.css和index2.css里的css3代碼是沒有加任何前綴的，打包以后css3前綴都已經(jīng)給加好了。
9、打包js文件和es6轉(zhuǎn)碼：編輯app/js目錄下的index.js和index2.js，寫上es6代碼。再打開配置文件webpack.config.js，將 "ES6轉(zhuǎn)碼和打包"?部分代碼放開，將 "CSS自動(dòng)添加前綴并打包"?部分代碼注釋掉，命令行里敲擊 "webpack"，打包完成后可以看見dist/js目錄下會(huì)生成一個(gè)bundle.js的文件，里面正是被打包和轉(zhuǎn)碼好的js代碼，可完美被IE9及以上的瀏覽器支持。
?
附上此例子的giuhub地址：https://github.com/Leeqly/webpack-es6-autoprefixer
可前往下載，然后直接cnpm install安裝好依賴包后就可以使用了。
?
順便提一下webpack幾個(gè)常用命令
webpack：普通打包
webpack -p：壓縮打包
webpack -p -w：監(jiān)聽所有需要打包的代碼，只要有代碼被改動(dòng)并保存后，就會(huì)自動(dòng)進(jìn)行打包
轉(zhuǎn)載于:https://www.cnblogs.com/xiaohuizhang/p/8624444.html
總結(jié)
以上是生活随笔為你收集整理的webpack轻松入门教程的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： php简单的用户留言板实现内容(1-23
- 下一篇： BI之报表测试总结