webpack 简易配置入门教程

  LeungJZ

最近公司弄了个有150+页面的项目,心想,终于有机会可以去学习webpack了,以前想学却没有实际项目去引导逼迫去学,现在终于领略到了webpack的强大了。

什么是webpack

在前端的项目开发中,总有大量的页面和样式需要处理,而维护这些文件也成了头疼的问题。

为了简化开发,于是就有很多好的开发方式,如:
- 模块化开发。每个功能模块都分开成一个个独立的组件,需要的时候再引入。
- scss等预处理器。
- 使用pug, jade 更快编写HTML。
- …

这些方式确实可以大大提高开发效率,但是每种方式都有自己的打包方式,还有兼容性处理,如果纯手动处理,必然会增加工作量。

但是,现在有了webpack,上述问题基本解决了,一个webpack就可以处理各种繁琐的过程,给你一个清爽,快速的开发环境。

WebPack可以看做是模块打包机:它做的事情是,分析你的项目结构,找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言(Scss,TypeScript等),并将其转换和打包为合适的格式供浏览器使用。

简单的来说,在项目开发中,
- 你可以使用js,es6/7,甚至ts开发。
- es6/es7, .ts => .js
- 使用stylus, scss, less 等预处理器编写css
- .scss/.less => .css

webpack可以将你项目中的所有文件,处理成浏览器能识别的文件。

开始使用webpack

先新建一个练手用的空文件夹 $ mkdir webpack-demo ,并进入该文件夹。

  1. 新建 package.json.
$ npm init
  1. 安装webpack及其基本插件。
$ npm i -D webpack extract-text-webpack-plugin html-webpack-plugin css-loader file-loader style-loader url-loader

其中:
- extract-text-webpack-plugin : 该插件主要为了抽离css样式,可以将css从打包的js中抽离出来。以link方式引入样式。
- html-webpack-plugin : 该插件主要是用于生成html文件,并可以根据入口文件来引入相应的文件。
- css-loader : 解析css文件中的 importrequire ,并处理他们。
- style-loader : 将css样式通过 style 标签注入到html文件中。
- file-loader : 指明webpack将所引入的对象,并返回一个公网能访问的url地址。
- url-loader : 将文件转换成 base64编码。

  1. 配置webpack。

新建一个配置文件: $ touch webpack.config.js

var webpack = require('webpack');
var path = require('path');

var ExtractTextPlugin = require("extract-text-webpack-plugin");
var HtmlWebpackPlugin = require('html-webpack-plugin');

var webpackConfig = {
    // 设置入口文件。
    entry: './src/js/index.js',
    output: {
        // 设置输出文件夹
        path: path.join(__dirname, 'dist'),
        // 设置公用文件夹路径
        publicPath: '/',
        // 设置输出的js文件的名字规则。
        // [name] 为chunk中的名称
        // [hash] 为webpack生成的哈希值
        filename: "js/[name].[hash].bundle.js"
    },
    module: {
        rules: [{
            // 处理css文件
            test: /\.css$/,
            loader: "style-loader!css-loader"
        }, {
            // 处理html文件,并处理img 中 src 和 data-src 的引入路径
            test: /\.html$/,
            loader: "html-loader?attrs=img:src img:data-src"
        }, {
            // 处理字体文件
            test: /\.(woff|woff2|ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
            loader: 'file-loader?name=./fonts/[name].[ext]'
        }, {
            // 处理图片,并将8k以下的图片转为base64编码
            test: /\.(png|jpg|gif)$/,
            loader: 'url-loader?limit=8192&name=./img/[hash].[ext]'
        }]
    },
    plugins: [
        // 公共js提取
        new webpack.optimize.CommonsChunkPlugin({
            name: 'vendors', // 将公共模块提取,生成名为`vendors`的chunk
            // minChunks: 3 // 提取至少3个模块共有的部分
        }),
        // 提取公共css样式
        new ExtractTextPlugin('./css/[name].css'),
        // 处理html文件。
        new HtmlWebpackPlugin({
            filename: './view/index.html', //生成的html存放路径,相对于path
            template: './src/view/index.html', //html模板路径
            inject: 'body', //js插入的位置,true/'head'/'body'/false
            hash: true, //为静态资源生成hash值
            // chunks: ['vendors', allDirs[i] + '/' + matches[1]], //需要引入的chunk,不配置就会引入所有页面的资源
            minify: { //压缩HTML文件
                removeComments: true, //移除HTML中的注释
                collapseWhitespace: false //删除空白符与换行符
            }
        })
    ],
    // 设置开发服务器
    devServer: {
        contentBase: path.join(__dirname, "dist/"),
        host: 'localhost',
        port: 9090,
        inline: true
    }
}

module.exports = webpackConfig
  1. 测试配置文件:
    先设置开发文件夹目录:
-   webpack-demo
    +   node_modules
    -   src
        +   js      // 存放js文件
        +   css     // 存放css样式
        +   view    // 存放模板文件

        webpack.config.js
        package.json

新建一个 html 文件: $ touch ./src/view/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>Hello World</title>
</head>
<body>
    <h2>Hello World</h2>
    <p>This is from webpack-demo</p>
</body>
</html>

新建css文件: $ touch ./src/css/index.css

h2{
    color: red;
    opacity: 0.5;
    transform: rotateZ(-10deg);
}
p{
    color: green;
}

新建js文件: $ touch ./src/js/index.js

// 引入css文件。
require('../css/index.css')

console.log('hello world');

测试打包: $ webpack
OK!基本的配置就完成了。

我们可以看到,在项目中多了一个dist文件夹,里面存放的就是刚刚打包好的文件。打开index.html(需要在服务器中打开,并且服务器根目录为dist)可以看到,生成的html文件,征程显示我们写的内容,css样式则直接写入了style标签当中,而且自动引入了两个js文件,其中,vendors是带有公共部分的js文件,index则是我们一开始写的js逻辑文件。