1: 为什么要用 webpack?
webpack 已经是大部分前端项目打包工具的首选, 它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源
2: webpack 的简单使用
目录结构
新建一个文件夹 webpack-demo, 然后在文件夹中运行 npm init, 生成 package.json 文件, 然后在文件夹 webpack-demo 中新建 src(放置源码),build(放置打包后的代码) 两个文件夹, 在 src 文件夹中新建 js 文件夹, 在 js 文件夹中新建 main.js 和 hello.js 文件, 在 build 文件夹中新建 js 文件夹最后在根目录新建 index.html 文件, webpack-config.js 文件目录结构如下图:
图 1
安装 webpack
npm install webpack--save - dev
代码介绍
index.html 文件如下:
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <meta http-equiv="X-UA-Compatible" content="ie=edge">
- <title>Document</title>
- </head>
- <body>
- <h3>hello world</h3>
- <script src="build/js/bundle.js"></script>
- </body>
- </html>
main.js 如下:
- var hello = require('./hello')
- hello('I love the world')
hello.js 如下:
- module.exports = function(str) {
- alert(str)
- }
webpack-config.js 如下:
- module.exports = {
- entry: __dirname +'/src/js/main.js', // 入口文件,__dirname 指向当前执行脚本所在的目录
- output:{
- path: __dirname + '/build/js', // 打包文件的路径
- filename:'bundle.js' // 打包文件名
- }
- }
开始打包
在 package.json 文件中 scripts 字段配置 npm 运行命令如下所示:
图 2
在命令行运行 npm run build 就可以进行打包了运行结果如下:
图 3
看到以上结果表示打包成功之后打开 index.html, 可以看到如下结果:
图 4
表示 main.js 被执行了此时在 build/js 目录下可以看到打包后的文件 bundle.js
增加 hash
在上面的打包过程中, 我们最后打包生成的都是 bundle.js 文件其实为了保证文件每一次的版本变化, 我们可以为其加上 hash 值做法很简单, 只需在 webpack-config.js 文件中对 output 进行改造即可改造后如下:
- output:{
- path: __dirname + '/build/js',
- filename:'[name]-[hash].js'
- },
此时打包后的结果如下:
图 5
打包后生成的文件名就是红色箭头所示
3: webpack 的 pulgins 说明
插件
clean - webpack - plugin
按照第二部分的打包我们会发现一些问题添加了 hash 之后, 会导致改变文件内容后重新打包时, 文件名不同而内容越来越多, 这并不友好, 因此我们可以使用插件
clean - webpack - plugin
来解决这个问题插件的使用方法也很简单, 首先使用 npm 安装插件, 然后在 webpack-config.js 文件中进行插件的配置即可配置如下:
- var cleanWebpackPlugin = require("clean-webpack-plugin");
- module.exports = {
- entry: __dirname +'/src/js/main.js',
- output:{
- path: __dirname + '/build/js',
- filename:'[name]-[hash].js'
- },
- plugins:[
- new cleanWebpackPlugin('build/js/*.js')
- ]
- }
如此即可保证 build/js 目录下始终只有最新打包生成的 js 文件
插件 html-webpack-plugin
现在还有一个问题, 每次打包后生成的 js 文件名因为有 hash 值而变得不确定, 难道我们每次都得在打包后, 手动将 index.html 引入的文件名进行更改吗? 当然有插件已经为我们做好这件事情了它就是插件 html-webpack-plugin
配置如下:
- var cleanWebpackPlugin = require("clean-webpack-plugin")
- var htmlWebpackPlugin = require("html-webpack-plugin")
- module.exports = {
- entry: __dirname +'/src/js/main.js',
- output:{
- path: __dirname + '/build/js',
- filename:'[name]-[hash].js'
- },
- plugins:[
- new cleanWebpackPlugin('build/js/*.js'),
- new htmlWebpackPlugin({
- template: 'index.html'
- })
- ]
- }
如此打包之后, 在 build/js 目录下就可以看到一个 index.html, 该文件引入了打包后的 js 文件打开该 html 文件就可以看到图 4 的效果
插件 UglifyJsPlugin
该插件是用来压缩 JS 代码的, 是 webpack 内置的插件, 无需 npm 安装
使用:
- var cleanWebpackPlugin = require("clean-webpack-plugin")
- var htmlWebpackPlugin = require("html-webpack-plugin")
- var webpack = require('webpack');
- module.exports = {
- entry: __dirname +'/src/js/main.js',
- output:{
- path: __dirname + '/build/js',
- filename:'[name]-[hash].js'
- },
- plugins:[
- new cleanWebpackPlugin('build/js/*.js'),
- new htmlWebpackPlugin({
- template: 'index.html'
- }),
- new webpack.optimize.UglifyJsPlugin()
- ]
- }
此时打包后的文件是压缩的
4: webpack 的 loader 说明
CSS-loader
下面为我们的 demo 编写 css 文件, 在 src 目录下新建 css 文件夹, 在 css 文件夹里面新建 main.css 文件, 代码如下:
- html body {
- background: red;
- }
然后在我们的 main.js 里面引入该 css 文件
- var hello = require('./hello')
- require('./../css/main.css')
- hello('I love the world....')
最后打包, 我们会发现报错, webpack 无法处理 css 文件, 此时就需要我们的 loader 登场了安装下载 css-loader 和 style-loader, 然后在 webpack.config.js 中进行配置:
- var cleanWebpackPlugin = require("clean-webpack-plugin")
- var htmlWebpackPlugin = require("html-webpack-plugin")
- var webpack = require('webpack');
- module.exports = {
- entry: __dirname +'/src/js/main.js',
- output:{
- path: __dirname + '/build/js',
- filename:'[name]-[hash].js'
- },
- plugins:[
- new cleanWebpackPlugin('build/js/*.js'),
- new htmlWebpackPlugin({
- template: 'index.html'
- }),
- new webpack.optimize.UglifyJsPlugin()
- ],
- module:{
- rules:[
- {
- test: /\.css/,
- use: ['style-loader', 'css-loader']
- }
- ]
- }
- }
此时在打包就成功了, 此时打开 build 目录下的 index.html 文件, 我们发现 css 生效了
file-loader
现在为我们的 demo 中引入图片, 在 src 目录下新建 img 目录, 引入一张图片, 命名为 1.jpg, 在 main.js 中引入该图片, 在根目录下的 index.html, 写一个图片元素如下:
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <meta http-equiv="X-UA-Compatible" content="ie=edge">
- <title>Document</title>
- </head>
- <body>
- <h3>hello world</h3>
- <img src="${require('./src/img/1.jpg')}" alt="">
- </body>
- </html>
- main.js:
- var hello = require('./hello')
- require('./../css/main.css')
- require('./../img/1.jpg')
- hello('I love the world....')
- webpack.config.js
- var cleanWebpackPlugin = require("clean-webpack-plugin")
- var htmlWebpackPlugin = require("html-webpack-plugin")
- var webpack = require('webpack');
- module.exports = {
- entry: __dirname +'/src/js/main.js',
- output:{
- path: __dirname + '/build/js',
- filename:'[name]-[hash].js'
- },
- plugins:[
- new cleanWebpackPlugin('build/js/*.js'),
- new htmlWebpackPlugin({
- template: 'index.html'
- }),
- new webpack.optimize.UglifyJsPlugin()
- ],
- module:{
- rules:[
- {
- test: /\.css/,
- use: ['style-loader', 'css-loader']
- },
- {
- test: /\.png|jpg|svg|gif/i,
- use: ['file-loader?name=[name]-[hash].[ext]']
- }
- ]
- }
- }
安装 file-loader, 然后进行打包, 此时在我们的 build/js 目录下会有一个打包后的图片, 并且打包后的 index.html 文件也正确的引入了该图片
打包结果:
图 6
此时打开 build 目录下的 index.html 文件, 发现运行正常
来源: http://www.jianshu.com/p/7e95c82d542b