一、安装webpack
全局安装:
npm install wabpack –g /*(webpack –h 查看安装是否完成)*/
本地的开发环境安装:
npm install --save-dev webpack /*(可能会使用到webpack自带的一些工具。所以全局和本地都安装一下!)*/
根目录下新建一个webpack.config.js的文件,用来编写和 webpack 相关的配置。
二、 合并脚本原理:
脚本模块 A 依赖同目录下的脚本模块 B 和 C:
// A.js:
import {*} from './B.js'; // E6 Modules
const C = require('/C.js'); // CommonJS
A是入口模块(从模块A进入之后就能找到我们应用需要的所有模块),并且我们需要指定一个打包后的输出文件,比如叫bundle.js,那么我们在webpack.config.js的配置文件里可以这么写:
module.exports = {
entry: './A.js',
output: {
filename: './bundle.js'
}
}
接下来打开命令行(cmd),切换到开发的根目录,运行webpack,合并后的bundle.js即输出生成了。
entry属性表示入口模块,output属性表示输出脚本。这里有两点可以改进:
- entry属性的值可以是一个数组,意味着可以允许有多个入口模块
- output对象中还可以添加path属性,表示要输出的路径(必须为绝对路径,所以可以借助Node.js的path.resolve或者path.join方法);而在filename中填上文件名即可
三、 Webpack支持的脚本模块规范
不同项目在定义脚本模块时使用的规范不同:
(1) Node.js 中的CommonJS规范
(2) ES6 Modules的模块规范
(3) AMD模块规范(参考RequireJS)
四、 监视修改,自动打包
module.exports = {
entry: './A.js',
output: {
filename: './bundle.js'
},
watch: true
}
wepack.config.js文件中添加watch参数,告诉webpack监视文件的变化。一旦发生变化后自动打包
五、 设置别名,缩短引用的路径
实际项目中源文件不会放在项目的根目录中,而是集中放在某个文件夹内,比如叫src。并且文件夹中又会再次将文件分类,例如分为srcipts和styles,scripts中又会添加为components和utils。components中下又有具体的组件文件夹等等。
引用模块或者组件时常常会发生这样的情况,引用名称冗长无比:
require('./src/scripts/components/checkbox/checkbox.js');
可以在webpack配置文件中添加一个“代号”代指这个路径。这就是alias字段。alias字段必须添加在resolve字段下:
module.exports = {
entry: './A.js',
output: {
filename: './bundle.js'
},
resolve: {
alias: {
Components: path.join(__dirname, '..', 'src', 'scripts', 'components')
}
},
watch: true
}
当我们需要引用./src/scripts/components目录下的组件时,引用的路径只是Components/checkbox.js就好了
六、当有很多配置文件, 所有配置文件放在config文件夹里面的操作。
有时我们不希望把配置文件放在根目录,因为配置文件可能有很多,开发时的配置文件,上线时的配置文件,测试也需要配置文件。
于是我们可以把所有的配置文件都放在一个文件夹中管理,例如叫做config。但此时入口文件app.js则与配置文件不在同一个目录中,则需要新增配置参数告诉webpack去哪里找app.js。这个配置参数就叫做context。
结构关系:
Root
|---config
|---webpack.config.js
|---app.js
context值如下所示,务必使用绝对路径:
module.exports = {
entry: './A.js',
context: path.join(__dirname, '..'),
output: {
filename: './bundle.js'
}
}
在根目录运行webpack时,则需要指定配置文件:
webpack --config config/webpack.config.js
七、 配置各个开发环境的运行命令(dev 、pl、 线上等等)
我们把配置文件统一放入config文件夹中后,每次打包时都需要输入一长串的webpack –config config/webpack.config.js,这样非常不便。于是我们可以把命令添加进入每个项目都有的package.json文件中即可。
开发环境:
我们要执行的命令放入scripts对象中,因为是开发环境,所以我把这个命令取名为dev:
Dev环境
{
"name": "",
"version": "",
"scripts": {
"dev": "webpack --config config/webpack.config.js"
}
}
当你需要运行webpack命令时,只需要运行npm run dev就可以了。其中的dev是可以变化的参数,你可以继续往scripts字段中的添加其他的参数。
PL环境:
{
"name": "",
"version": "",
"scripts": {
"pl": "webpack --config config/webpack.config.js"
}
}
这里引入pl 阶段的webpack.config.js,运行的话执行
npm run pl
八、 通过loader 将样式文件和图片引入进来一起打包
入口文件 app.js 中引入样式文件
require('./styles/style.css');
样式打包进脚本的效果是什么样的?实际情况是,当你打开包含最终脚本bundle.js的页面时,你会发现样式代码已经注入进页面的head中了。
默认情况下webpack只认识js文件,所以它只能打包js文件。你可以通过给 webpack 添加 loader 来让 webpack 识别更多的文件类型。比如我们可以添加style-loader和css-loader让 webpack 识别样式文件并且打包,并且注入页面中。
让我们安装样式相关的loader:
npm install --save-dev style-loader css-loader
安装完毕之后,我们还需要对loader进行配置。告诉这个loader应该指定对哪些文件进行识别和处理,在webpack.config.js中添加对loader的配置,添加在module字段中:
(1) test是一个正则表达式用于匹配使用该loader的文件 loaders则表示使用了哪些loader
(2) 新版本的webpack中,loaders数组中loader名称一定要加上-loader后缀,否则打包时会出错
(3) 排除某些目录,通过添加exclude字段,注意需要使用绝对路径:
module: {
loaders: [{
test: /\.css$/,
exclude: path.join(__dirname, )
loaders: ['style-loader', 'css-loader']
}]
}
九、 插件的使用
如果你有打开上面所说的打包后的bundle.js文件的话,你会发现这个文件内容是未压缩。在开发中我们存在类似的需求例如对最终文件进行压缩。此时我们就需要使用到插件(plugin)了。
使用插件:
在webpack2中webpack已经自带了一些插件,例如压缩脚本代码用的UglifyJsPlugin。
(1) 在文件头部引用webpack类库:
const webpack = require(‘webpack’)
(2) plugins字段下新建一个实例:
plugins: [
new webpack.optimize.UglifyJsPlugin()
]
同时你也可以在UglifyJsPlugin构造函数调用中传入参数对插件进行配置。
十、 在webpack 中安装Babel
Babel在Webpack中是以Loader的形式存在:
(1) 安装Babel的核心组件Babel-core和Babel-Loader。安装编译ES6的babel-preset-es2015和babel-preset-react。
npm install --save-dev babel-loader babel-core babel-preset-es2015 babel-preset-react
babel-preset-es2015 //---------编译ES6
babel-preset-react // ---------编译react
(2) 在根目录下建立一个名为.babelrc的配置文件 (配置 babel)
告诉Babel使用这俩个presets
{
"presets": [
"es2015",
"react"
]
}
(3) 在webpack.config.js中进行对babel的配置,添加新的loader:
loaders: [{
test: /\.css$/,
loaders: ['style-loader', 'css-loader']
}, {
test: /\.js|jsx$/,
exclude: '/node_modules/',
loaders: ['babel-loader']
}]
验证项目:
(1)
npm install react react-dom –save
(2) src/scripts/下新建一个文件夹react_components, 并添加一个组件文件:head.jsx,内容如下:
import React from 'react';
export default class Head extends React.Component {
render() {
return (
<div>
<h1>Hello World 02</h1>
</div>
)
}
}
(3) 接下来在app.js添加以下内容:
const React = require('react');
const ReactDOM = require('react-dom');
import Head from './src/scripts/react_components/head.jsx';
ReactDOM.render(
<Head />,
document.querySelector('.container')
)