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
