webpack系统学习之一
Posted 山西软件小课堂
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了webpack系统学习之一相关的知识，希望对你有一定的参考价值。
npm install webpack
创建一个hello.js
function hello(str) {
console.log(str);
}
然后执行 webpack hello.js hello.bundle.js
这样就会生成一个打包后的文件，打包后的文件会自动生成trunk id，用于webpack引用，hash值，文件大小size
生成的test.bundle.js文件，会自动生成
__webpack_require__
这个是用来引用生成的trunk
创建一个hello.css文件
直接执行 webpack hello.js hello.bundle.js 会出错，因为webpack默认不会识别css文件。需要加载相关loader:
处理一： 在require('style-loader!css-loader!./hello.css');
处理二：编译时可以加相关参数
webpack hello.js hello.bundle.js --bundle-bind 'css=style-loader!css-loader'
webpack后还可以加其它常用参数，如：
--watch 自动编译
--progress 查看进度
--display-modules 显示打包依赖的模块
--display-reasons 显示为什么打包该模块的原因
--config webpack.dev.config.js webpack默认打包当前目录下的webpack.config.js，如果想打包指定的，则用该命令
官网中有详细介绍：https://webpack.github.io/docs/configuration.html
我们这里简单介绍：
entry: 打包的入口文件，它可以是
字符串：单个文件
数组：想把平行的、互相依赖的文件打包在一起
对象：entry的key为chunk name，后续[name]值，所以filename定义为[name].bundle.js
{
entry: {
page1: "./page1",
page2: ["./entry1", "./entry2"]
},
output: { // Make sure to use [name] or [id] in output.filename
// when using multiple entry points
filename: "[name].bundle.js",
chunkFilename: "[id].bundle.js"
}
}它除了[name]，还可以是[hash] (该次打包的md5值)、 [chunkhash](该文件的md5值)
output: {
path: 打包到哪里
filename: 打包的文件名是啥
}
output里也可以有publicPath: 指的是解析中的path，即非entry文件的共用路径，如果没有publicPatha, 则会查找path
loader是用来解析资源的，如将webpack中不支持的jsx转成js.
它有三种使用方式：
1、require('style-loader!css-loader!./hello.css')
2、cli里webpack hello.js hello.bundle.js --bundle-bind 'css=style-loader!css-loader'
3、配置文件里：
{
module: {
loaders: [
{ test: /\.jade$/, loader: "jade" }, // => "jade" loader is used for ".jade" files
{ test: /\.css$/, loader: "style!css" }, // => "style" and "css" loader is used for ".css" files
// Alternative syntax:
{ test: /\.css$/, loaders: ["style", "css"] },
]
}
}下面介绍常用的几种loader-------------------------
loader匹配规则是从右往左，如：
{ test: /\.css$/, loader: "style-loader!css-loader?mimetype=image/png" }先是css-loader处理，再用style-loader加载到页面的style里
css: style!css?importLoaders=1!postcss
less: style!css!postcss!less
sass: style!css!postcss!sass
(postcss可以用来autoprefix, 其实可以直接用autoprefixer-loader)
图片：file-loader/url-loader/image-webpack-loader
file-loader与url-loader区别是：url可以设置limit，当图片比4kb小时则转成base64，这样优点是减少http请求，缺点是增大文件大小，无法使用浏览器缓存。
（image-webpack-loader可以用来压缩图片）
html: html-loader
html-webpack-plugin 插件的使用
我们知道，入口文件index.html里需要引入相关Js\css，但普通写法只是将静态文件写死在页面，如何动态引入的，我们可以用webpack 的模板插件,自动生成html文件。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title><%= htmlWebpackPlugin.options.title %></title>
<link rel="stylesheet" href="<%= htmlWebpackPlugin.options.cssPath %>"/>
</head>
<body>
<div class="ake">
</div>
<script src="<%= htmlWebpackPlugin.options.jsPath %>"></script>
</body>
</html>
在webpack中配置：
plugins：[
new HtmlWebpackPlugin({
title: '测试',
template: './views/nianguan.html', // Load a custom template
inject: false, // Inject all scripts into the body
filename: '../views/test.html', //输出html文件的位置
jsPath: '../js/std-act.js?t=' + new Date()*1,
cssPath: '../css/std-act.css?t=' + new Date()*1,
hash: true,
minify: {
removeComments: true,
collapseWhitespace: true
}
}),
]
在html文件中，输出时用<%= %>，如果想运行则直接<% %>
如运行htmlWebpackPlugin里所有属性
<% for (var key in htmlWebpackPlugin){ %>
<%= key %>
<%}%>
以上是关于webpack系统学习之一的主要内容，如果未能解决你的问题，请参考以下文章