安装
-
安装
首先确定安装了node.js,nodejs安装在此不做赘述
然后安装webpack,在此安装的为webpack4+,webpack的前面几代版本与webpack4+版本有所出入,该文档仅作webpack4+解释。使用之前版本可能打包不成功。
命令行模式下,cd进使用npm init
初始化的项目的根目录。本地安装webpack。npm install --save-dev webpack
由于使用的是webpack4+
在此还需要安装webpack-clinpm install --save-dev webpack-cli
我安装webpack时,全部使用的是本地安装(–save-dev),没有使用全局安装(-g),最大的原因就是不同的项目可能使用的不同的版本的webpack,如果全局安装,有可能应为版本的不同打包失败,所以,尽量使用本地安装,容易控制依赖版本。
-
起步
首先,我们需要改变引用外部资源(js等)的方法,如果使用<script src="./file.js"></script>
的方式,会有以下问题出现:
a、无法立即体现,脚本的执行依赖于外部拓展库
b、如果依赖不存在,或者引入顺序错误,应用程序将无法正常运行。
c、如果依赖被引用但是并没有使用,浏览器将被迫下载无用代码 -
打包js
我们将所有引入外部依赖包的形式改为import tool from 'tool'
类似方式,既可一开始下一步打包操作。由于webpack4+安装了webpack-cli,node8.2+版本提供了npx命令,可以直接使用npx webpack
调用在初始安装的webpack包中的webpack二进制文件,这样的打包只能用于基础简单的项目。
实际上,在大多数的项目中,都会需要很复杂的设置,这就需要用到webpack.config.js,我们自己设置配置使用,用来取代使用CLI选项方式的配置文件。
通过在package.json
文件中添加一行build脚本"scripts": { "test": "echo \"Error: no test specified\" && exit 1", "build": "webpack --config webpack.config.js" },
添加
webpack.config.js
文件,内容为const path = require('path'); module.exports = { entry: ['./src/index.js', './src/jstest.js'], output: { filename: 'bundle.js', path: path.resolve(__dirname, 'dist') } };
这里使用了数组的方式,我将所有的入口js打包如一个bundle中。
运行npm run build
即可打包,当前需要将index.html移入到dist文件夹中,并修改其中引入的js为./bundle.js
。 -
打包资源文件
webpack最出色的功能之一就是,除了JavaScript,还可打包任何其他类型的文件。同样的,需要用显式依赖的方式引入。
首先试着将css文件打包,需要先安装可以打包css样式的loadernpm install --save-dev style-loader css-loader
同时在webpack.config.js中添加
module: { rules: [ { test:/\.css$/, use: [ 'style-loader', 'css-loader' ] } ] }
这里的test中的值是一个正则表达式,标识以.css结尾的全部文件,都将会提供给style-loader和css-loader。
下列会根据不同的文件给出不同的loader
文件类型 | loader |
---|---|
css | style-loader, css-loader, postcss-loader |
png, svg, jpg, gif | file-loader |
woff, woff2, eot, ttf, otf | file-loader |
csv, tsv | csv-loader |
xml | xml-loader |
- 管理输出
我们前面一直是用自己造的index.html,但是,当我们用到hash给文件命名时,hash值会一直在边,我们没有办法做到每一次构建时,都去手动更改index.html中的引入文件的名称,所以,我们需要让webpack帮我们生成index.html,这里就用到了插件plugins,安装html-webpack-plugin
插件,同时在webpack.config.js
中插入下述代码const HtmlWebpackPlugin = require('html-webpack-plugin'); ... plugins: [ new HtmlWebpackPlugin({ title: 'Output Management' }) ],
这样再次运行 npm run build
webpack会帮我们建一个index.html。
并且由于我们之前的dist生成的许多已经用不上的文件依然存在于dist文件夹中,我们可以使用webpack在每次构建前清理/dist文件夹,让dist文件夹中只有我们会用到的文件,这里需要安装clean-webpack-plugin
插件,同时在webpack.config.js
中添加下述代码
const CleanWebpackPlugin = require = require('clean-webpack-plugin');
...
plugins: [
new HtmlWebpackPlugin({
title: 'Output Management'
}),
new CleanWebpackPlugin(['dist']),
],