本文简单记录学习webpack3.0的笔记，已备日后查阅。节省查阅文档时间
安装
可以使用npm安装
//全局安装
npm install -g webpack
//安装到项目目录
npm install --save-dev webpack
npm init会创建package.json文件。配置该文件可以简化我们之后的一些操作，比如我们对其中的“script”添加start命令，可以用“npm start”替代webpack命令
{
name: "webpack-example",
...
"scripts": {
"start": "webpack"
},
...
}
几个概念
webpack是一个现代javascript应用程序的静态模块打包器。它构建一个依赖关系图，包含所有模块，打包成一个或多个bundle。
四个核心概念
- entry ：指示webpack应该从哪个模块开始，构建依赖图。默认值./src
- output：指示在哪里输出创建的bundles，默认值./dist
- loader：让 webpack 能够去处理那些非 JavaScript 文件。loader 能够 import 导入任何类型的模块
- plugin：插件的范围包括，从打包优化和压缩，一直到重新定义环境中的变量
entry 文件的指定
单一entry文件
mkdir entrydemo
cd entrydemo
npm init
npm init会让你输入一些信息配置package.json。如下
{
"name": "entrydemo",
"version": "1.0.0",
"description": "",
"main": "main.js",
"scripts": {
"test": "echo "Error: no test specified" && exit 1"
},
"author": "",
"license": "MIT"
}
接下来我们要创建index.html和main.js文件。main.js文件操作index.html的p标签内容
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<p id="title"></p>
<script type="text/javascript" src="main.js"></script>
</body>
</html>
main.js
document.getElementById("title").innerHTML="HELLO webpack";
下面我们要用webpack将main.js打包成bundle.js文件
如果你的webpack是全局安装，那么
webpack main.js bundle.js
如果是安装在项目根目录
node_modules/.bin/webpack main.js bundle.js
注意，在webpack3中，webpack-cli是集成的，到了4里面分开来了。第一次webpack时候可能会提示你安装webpack-cli，安装即可。上面的命令也有所改变，关于webpack4，本文不赘述
然后将index.html的javascript路径改为bundle.js
<script type="text/javascript" src="bundle.js"></script>
然后打开index.html，可以看到页面和上面是一样的
以上是用命令行指定entry file，下面我们写配置文件webpack.config.js去构建bundle.js
module.exports = {
entry: './main.js',
output: {
filename: 'bundle.js'
}
}
写好配置文件后，运行webpack命令就构建好bundle.js了。（非全局安装是node_modules/.bin/webpack）
多个entry file
假设我们的入口文件是main1.js和 main2.js，对应输出是bundle1.js和bundle2.js
webpack.config.js这么写
module.exports = {
entry: {
bundle1: 'main1.js',
bundle2: 'main2.js'
}
output: {
filename: '[name].js'
}
}
loader
Babel-loader
Babel-loader用来将JSX/ES6文件转换成普通JS文件
module.exports = {
entry: './main.jsx',
output: {
filename: 'bundle.js'
},
module: {
rules: [
{
test: /.jsx?$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: ['es2015', 'react']
}
}
}
]
}
};
CSS-loader
webpack.config.js
module.exports = {
entry: './main.js',
output: {
filename: 'bundle.js'
},
module: {
rules:[
{
test: /.css$/,
use: [ 'style-loader', 'css-loader' ]
},
]
}
};