webpack打包處理html、css、js、img、scss文件

webpack --help 查看webpack命令
啓動服務 npm run dev (先配置好服務)
進入對應文件夾並初始化npm
cd demo
npm init
安裝webpack
npm install webpack --save-dev
默認package.json中scripts修改
"webpack": "webpack --config webpack.config.js --display-modules --progress --colors --display-reasons"
安裝css loader 以便於支持loader
npm install css-loader style-loader --save-dev
引用文件中須要引入樣式loader
require("style-loader!css-loader!./style.css");(style-loader必須放在css-loader前，不然要報錯）
簡單點經過命令行綁定loader
webpack hello.js hello.bundle.js --module-bind 「css=style-loader!css-loader」 這裏要用雙引號
這句話每次打包都要綁定這個
--watch 自動打包 更改代碼以後自動打包
--progress 看打包過程 --progress --display-modules 看打包模塊
--progress --display-modules --display-reasons 看打包緣由信息

入口實際用對象的形式 不一樣頁面分別打包，chunkname和hashname是上線版本所須要的
webpack插件控制html頁面引入的src 和打包後的js相同
npm install html-webpack-plugin --save-dev

title接收設定的參數寫法
<title><%= htmlWebpackPlugin.options.title %></title>

var htmlWebpackPlugin=require("html-webpack-plugin");
module.exports={
entry:{
main:__dirname+"/src/script/main.js",
a:__dirname+"/src/script/a.js",
b:__dirname+"/src/script/b.js",
c:__dirname+"/src/script/c.js"
},
output:{
path:__dirname+"/dist",//html在dist目錄下
filename:"js/[name].bundle.js", //js放在js目錄下 用相對路徑
//這裏的name是entry中前邊那個 main a
publicPath:'http://cdn.com',//線上地址

},
plugins:[
new htmlWebpackPlugin({
filename:'a.html',
template:'index.html',
//這裏index 是根目錄下的index.html
inject:false, //script標籤嵌入位置
title:"this is A", // 傳參
//chunks:["main","a"], //引入單獨的chunks
excludeChunks:["b","c"] //排除的chunks
}),
new htmlWebpackPlugin({
filename:'b.html',
template:'index.html',
//這裏index 是根目錄下的index.html
inject:false, //script標籤嵌入位置
title:"this is B", // 傳參
//chunks:["b"],//引入單獨的chunks
excludeChunks:["a","c"] //排除的chunks
}),
new htmlWebpackPlugin({
filename:'c.html',
template:'index.html',
//這裏index 是根目錄下的index.html
inject:false, //script標籤嵌入位置
title:"this is C", // 傳參
//chunks:["c"] , //引入單獨的chunks
excludeChunks:["b","a"] //排除的chunks
}),
]
}

 

 

去掉公共路徑 只要後邊的路徑
<%= compilation.assets[htmlWebpackPlugin.files.chunks.main.entry.substr(htmlWebpackPlugin.files.publicPath.length)].source() %>
單獨引用某個js
<script src="<%= htmlWebpackPlugin.files.chunks.jq.entry %>"></script>
若是不包含main 則引入，這裏是body標籤有選擇的引入。
<% for(var k in htmlWebpackPlugin.files.chunks) { %>
<% if(k !='main'){ %>
<script src="<%= htmlWebpackPlugin.files.chunks[k].entry %>"></script>
<% }%>
<% } %>
ERROR in Entry module not found: Error: Can't resolve 'babel-loader' in.........」
npm install babel-loader --save
Cannot find module 'babel-core'
npm link babel-core
babel 安裝命令行代碼
npm install babel-preset-env --save-dev
config.json文件中
module: {
loaders: [
{
test: /\.js$/,
loader: "babel-loader", //這裏是babel-loader
"query": {
"presets": [ "env" ]
},
}
]
},
引入jq，
main.js中（或其餘js）
import $ from './jquery-1.11.3';
window.$ = $;
window.jQuery = $;
export default $;
引入jq的文件
import $ from './main.js'

babel轉化打包比較慢，速度優化
exclude include 相對路徑和 絕對路徑
exclude:__dirname+"/node_modules",//排除的範圍（相對路徑）
include:path.resolve(__dirname+"src"),//包含的範圍
npm i style-loader css-loader --save-dev ======= npm install style-loader css-loader --save-dev

postcss-loader 增長廠商前綴
npm install postcss-import --save-dev
npm install autoprefixer --save-dev 安裝postcss的一個插件
loaders:["style-loader","css-loader?importLoaders=1","postcss-loader"]
這裏?importLoaders=1 是 在css文件中@import 其餘css文件處理廠商前綴

安裝less
npm i less-loader --save-dev
ERROR in Cannot find module 'less'
npm install --save-dev less
npm install --save-dev file-loader

打包順序按js順序輸出
chunks:["main","jq","headerFun","rem"], //引入單獨的chunks
//excludeChunks:[""] //排除的chunks
chunksSortMode: function (chunk1, chunk2) {
var chunks = ['main', 'jq', 'headerFun',"rem"];
var order1 = chunks.indexOf(chunk1.names[0]);
var order2 = chunks.indexOf(chunk2.names[0]);
return order1 - order2;
}
最頂部引入const autoprefixer = require('autoprefixer');
//postcss是js對css進行處理
new webpack.LoaderOptionsPlugin({
options: {
context: __dirname,
postcss: [
autoprefixer
]
}
})
處理html中的img標籤的圖片，安裝npm i html-withimg-loader --save
npm install img-loader --save-dev

在 webpack 中引入圖片須要依賴 url-loader 這個加載器。 npm install url-loader --save-dev
安裝完file-loader就能夠用一下代碼處理css中的圖片background：url()這種
{
test: /\.(jpe?g|png|gif|svg)$/,
loader: 'file-loader',
}
在頂部引入 var html = require('html-withimg-loader');
在htmlWebpackPlugin中加入這2行，

template: 'html-withimg-loader!' + path.resolve(__dirname, "live.html"),
filename: "live.html",

scss文件處理
//在項目下，運行下列命令行
npm install --save-dev sass-loader
//由於sass-loader依賴於node-sass，因此還要安裝node-sass
npm install --save-dev node-sass

test:/\.scss$/,
loader:'style-loader!css-loader!sass-loader'

 

附：初學者 參數解釋  http://array_huang.coding.me/webpack-book/chapter1/webpack-config-introduction.html