webpack初试

2017-12-11 本文已影响80人 tiancai啊呆

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文件，发现运行正常。

图7

5: 总结。

以上只是webpack的简单使用，关于webpack的更多介绍请去官网查看，包括各种插件和loader的使用。