Webpack入門指南
一、什么是 webpack？
webpack是一款模塊加載器兼打包工具，它能把各種資源，例如JS（含JSX）、ES6、樣式（含less/sass）、圖片等都作為模塊來使用和處理。
二、安裝
$ npm install webpack-g
三. 配置
創建webpack.config.js它的作用和gulpfile.js一樣就是一個配置項，設置 webpack 任務功能。
entry 入口文件 讓webpack用哪個文件作為項目的入口
output 出口 讓webpack把處理完成的文件放在哪里
module 模塊 要用什么不同的模塊來處理各種類型的文件
plugins 用于提取多個入口文件的公共腳本部分，然后生成一個 common.js 來方便多頁面之間進行復用。
resolve 用來設置路徑指向
watch 用監聽文件有改動后執行打包
module.exports={entry:"",//入口文件output:{//出口path:"",filename:""},module:{//模塊loaders:[{test:/\.js$/,loader:""}]},plugins:{},resolve:{},wacth:true}
webpack命令
//直接運行webpack.config.js來打包$ webpack//使用另一份配置文件來打包$ webpack--config XXX.js//監聽變動并自動打包$ webpack--watch//壓縮混淆腳本$ webpack-p
四.開啟服務器自動刷新
安裝全局webpack-dev-server模塊
//安裝$ npm install webpack-dev-server-g//運行$ webpack-dev-server--progress--colors
配置設置webpack.config.js
devServer:{contentBase:"www/",inline:true,port:"3000"}
五.例子說明
1.例子demo01文件
全局安裝webpack就可以運行演示例子
2.例子demo02文件
需要引入CommonsChunkPlugin,這個屬于webpack內置的一個插件，需要在當前目錄安裝webpack
作用是：用于提取多個入口文件的公共腳本部分
配置設置webpack.config.js
varwebpack=require('webpack');module.exports={...plugins:[newwebpack.optimize.CommonsChunkPlugin({name:'common',//合并公共模塊到指定的JS文件? 注意不要.js后綴filename:'js/common.js',//輸出的目錄chunks:['index','login']//抽取的文件})]}
3.例子demo03文件
打包樣式和轉換less或sass
//安裝出來css模塊$ npm installstyle-loader css-loader--save-dev//安裝轉less模塊$ npm install less-loader less--save-dev//安裝轉sass模塊$ npm install sass-loader node-sass--save-dev
配置設置webpack.config.js
varwebpack=require('webpack');module.exports={...module:{// webpack使用loader的方式來處理各種各樣的資源，比如說樣式文件，我們需要兩種loader，css-loader 和 style－loader，css-loader會遍歷css文件loaders:[// { test: /\.(css|less)$/, loader: 'style-loader!css-loader!less-loader'},{test:/\.scss$/,loader:'style-loader!css-loader!sass-loader'}]},resolve:{alias:{style:'../module/style.less',//后續直接 require('style') 即可}},watch:true//監聽文件一旦改變重新打包}
4.例子demo04文件
加載模塊到全局和自動刷新
//安裝全局webpack-dev-server模塊$ npm install webpack-dev-server-g//啟動服務器$ webpack-dev-server--progress--colors
配置設置webpack.config.js
module.exports={...devServer:{inline:true,port:8080}...}
