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