webpack轻松入门教程
webpack之傻瓜式教程及前端自動化入門
接觸webpack也有挺長一段時間了，公司的項目也是一直用著webpack在打包處理，但前幾天在教新人的情況下，遇到了一個問題，那就是：盡管網上的webpack教程滿天飛，但是卻很難找到一個能讓新人快速入手的、接地氣的、傻瓜式的教程，自己手把手教又太浪費時間。想了一想，決定自己寫一篇webpack的傻瓜式教程，旨在教會尚未了解webpack的人迅速入手懂得基本原理，而不是懵逼一昧用著老員工搭好的環境天天敲著“webpack -p -w”卻不知這到底是干嘛的。
?
對于webpack的概念、用途、好處等等一律省略，想了解的上網搜索即可，這里直接演示如何新建一個webpack的實例。
?
1、安裝好nodejs，安裝過程網上找。
?
2、在D盤、E盤或任意一個磁盤中新建文件夾，命名為webpack_demo：
?
3、在webpack_demo文件下按住Shift鍵后點擊鼠標右鍵，再左鍵點擊“在此處打開命令行窗口”：
在打開的命令行窗口中鍵入：
npm initname表示項目名，version表示版本等等，不一一贅述了，看字段很容易明白，一一填完或直接一路按回車鍵，最后出現“is this ok？”時，敲擊回車鍵后webpack_demo的文件夾下便生成了package.json文件。
?
4、在命令行中分別執行以下命令，安裝對應的插件（--save-dev作用是安裝的插件的同時，將插件名寫入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步驟中手動添加而成）：
{"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、此時查看webpack_demo文件夾，會發現多出了一個文件夾：
雙擊打開，文件夾下的內容如下：
說明所需要的插件都已安裝成功。
?
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這個插件（用于支持打包css文件，默認只支持打包js文件），讀取當前目錄下js文件夾中的main.js（入口文件）內容，把對應的js和css文件打包，打包后的文件放入當前目錄的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');以上代碼意思為：引入當前目錄index文件夾下的index.js，index2.js，引入上一層目錄css文件夾下index文件下的index1.css，index2.css和common文件夾下的public.css。
?
8、新建上一步中對應路徑的css、js、index、common文件夾，里面分別新建對應的css或js文件，每個css、js文件里寫入不同的代碼。
?
9、窗口命令行中執行代碼：
webpack出現如下提示索命打包成功：
此時打開webpack_demo文件夾，發現多了dist文件夾，打開，里面文件如下：
?
10、新建一個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>雙擊用瀏覽器打開這個html，會發現入口文件main.js里面引入的所有js和css文件都已經執行了。
?
----------------------------------------------?我是分割線----------------------------------------------?
?
上邊是webpack的基本用法，可見它的基本作用是把一堆js和css壓縮成一個js和css，但其實它的用法遠不僅如此，這里再說兩個常見的用法：
1、自動加css3前綴。
我們在寫一些css3的樣式時，為了良好的兼容性，往往會把css3代碼寫成如下這個樣子：
.test{display: flex;display: -webkit-box;display: -ms-flexbox; }如果每個css3的代碼都要手動寫一堆前綴，那不僅要奔潰還容易出錯，這種事情還是交給工具來干，會效率和靠譜的多。
2、ES6轉碼。
ES6將會是以后的趨勢了，但兼容性很差，轉碼后兼容性就大大提高了。
?
下面通過另一個小demo，把這一串東西給跑起來。
demo示例文件結構如下：
文件目錄結構就不畫圖了，文字說明：
app：開發文件（編譯前的文件）
css：手動編寫的css文件集
css-entry.js：css入口文件，即說明需要打包哪些css文件
index.css：css示例文件1
index2.css：css示例文件2
js：手動編寫的js文件集
index.js：js示例文件1
index.js：js示例文件2
dist：生產文件（編譯后的文件）
css：編譯后生成的css文件集
bundle.css：編譯后生成的css文件，可直接引入使用
css.js：編譯后生成的另一種css文件的用法，可先不管
js：編譯后生成的jss文件集
bundle.js：編譯后生成的js文件，可直接引入使用
node_modules：webpack自動安裝的各依賴包，不用管
package,json：配置文件，主要告訴電腦需要安裝哪些依賴包
postcss.config.js：css3自動添加前綴的配置文件
webpack.config.js：webpack的配置文件
?
這個是什么意思呢，就是我們把自己寫好的代碼分別放進app的css和js文件夾里，打包以后，webpack會自動的將代碼進行添加css3前綴、打包壓縮、ES6轉碼等全部搞定后，將處理好的代碼文件生成在dist的css和js里，我們在html里直接引用處理好以后的代碼就行。
?
demo實戰：
1、按上邊的目錄結構一一將文件新建好，node_modules除外。
2、編寫package.json，寫明需要安裝哪些依賴包，這些依賴包分別是干嘛的不一一說明了，想了解詳細的可以直接復制依賴包名稱去百度上搜。
{"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轉碼和打包打包 // module.exports = { // entry: [ // 'babel-polyfill', // 添加了這個東西，才能完美的將ES6轉碼 // './app/js/index.js', // 進行轉碼的js文件1 // './app/js/index2.js', // 進行轉碼的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自動添加前綴并打包 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'], // 需要進行打包處理的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的配置內容自動安裝所需插件（使用cnpm之前要先把淘寶鏡像安裝一下：npm install -g cnpm --registry=https://registry.npm.taobao.org），不然就用“npm install”。安裝完成后，根目錄下會生成一個文件夾node_modules，這就是安裝好的依賴包。
5、編輯postcss.config.js，這是css3自動添加前綴所需要的配置文件
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、神奇的情況發生，根目錄下會生成dist文件夾，dist下有css文件夾，css下有bundle.css，打開bundle.css：
發現木有，本來index.css和index2.css里的css3代碼是沒有加任何前綴的，打包以后css3前綴都已經給加好了。
9、打包js文件和es6轉碼：編輯app/js目錄下的index.js和index2.js，寫上es6代碼。再打開配置文件webpack.config.js，將 "ES6轉碼和打包"?部分代碼放開，將 "CSS自動添加前綴并打包"?部分代碼注釋掉，命令行里敲擊 "webpack"，打包完成后可以看見dist/js目錄下會生成一個bundle.js的文件，里面正是被打包和轉碼好的js代碼，可完美被IE9及以上的瀏覽器支持。
?
附上此例子的giuhub地址：https://github.com/Leeqly/webpack-es6-autoprefixer
可前往下載，然后直接cnpm install安裝好依賴包后就可以使用了。
?
順便提一下webpack幾個常用命令
webpack：普通打包
webpack -p：壓縮打包
webpack -p -w：監聽所有需要打包的代碼，只要有代碼被改動并保存后，就會自動進行打包
轉載于:https://www.cnblogs.com/xiaohuizhang/p/8624444.html
總結
以上是生活随笔為你收集整理的webpack轻松入门教程的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： php简单的用户留言板实现内容(1-23
- 下一篇： BI之报表测试总结