webpack的入门教程

文章内容由蚊子的前端博客进行发布，或许你想看看他其他的文章呢： http://www.xiabingbao.com

原文地址： https://www.xiabingbao.com/post/webpack/webpack-started-tutorial.html

webpack在官方网站中是这么定义的。webpack是一个现代 JavaScript 应用程序的模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成少量的 bundle - 通常只有一个，由浏览器加载。

在webpack中，一切皆资源，CSS，JS，图片等都可以作为资源处理。webpack在配置大型项目时，可能会很大很复杂的配置，这里我们就从简单的2-3个页面的配置开始说起。

1. 简单的配置

如果之前用过gulp处理过前端资源，那么使用webpack就相对来说比较简单一些。要使用webpack的话，首先要在项目目录中安装webpack，其他的我们稍后再安装:

npm install webpack --save-dev

webpack的配置要在根目录的webpack.config.js里，我们先来看下简单基本的配置：

var webpack = require('webpack');

module.exports = {
    // 入口文件，可写多个
    entry : {
        entry : './src/entry.js'
    },

    // 输出出口
    output : {
        path : __dirname+'/out/', // 输出目录
        filename : '[name].js' // 输出的文件名称规则， [name]表示上面entry中的key值（main）
    },

    module : {
        // loader操作各种资源
        loaders : [
            {
                test : /\.css$/, // 匹配到.css文件
                // 用css-loader与style-loader处理匹配到的文件，从右向左执行
                loader : 'style-loader!css-loader' 
            }
        ]
    }
}

用上面的配置的话，还需要安装css-loader和style-loader:

npm install css-loader style-loader --save-dev

安装后，我们再配置一个简单的目录：

`-out
`-src
  `---css
  `---img
  `---js
  `-entry.js
`-package.json
`-webpack.config.js
`-index.html

好了，我们编写css和js了。

在css目录中，我们创建一个index.css:

.main{
    background: #ccc;
    width: 400px;
    height: 400px;
}

在js目录中，我们创建一个index.js：

function getTime(){
    console.log( Date.now() );
}

exports.getTime = getTime;

在 entry.js 中：

require("./css/index.css");

import o from './js/index.js';

console.log( o.getTime() );

执行命令：

webpack -p

在index.html中引入./out/entry.js:

<div class="main"></div>
<script type="text/javascript" src="./out/entry.js"></script>

打开index.html就能看到效果了。

2. webpack讲解

在webpack.config.js中：

entry可以有多个入口，来对应多个页面，比如我还有一个分享页面：

entry : {
    entry : './src/entry.js',
    share : './src/share.js'
}

在新页面中，引入./out/share.js即可。

loader是从右往左开始执行的，先执行css-loader，再执行style-loader。 css-loader用来解析css; style-loader是将css样式用style标签插入页面的head里。而且在引入loader时，可以直接省略-loader：

module : {
    loaders : [
        {
            test : /\.css$/,
            loader : 'style!css'
        }
    ]
}

在满足基本的配置后，我们需要满足更多的需求，比如我要用SASS编写css，我要用ES6写js，处理CSS中的图片等等。那么我们就得对webpack.config.js扩充配置：

npm install sass-loader url-loader file-loader babel-loader --save-dev

配置文件webpack.config.js：

output : {
    path : __dirname+'/out/', // 输出目录
    filename : '[name].js',
    publicPath : __dirname+'/out/' // 图片路径
}
module : {
    loaders : [
        {
            test : /\.css$/,
            loader : 'style!css'
        },
        {
            test: /\.(jpg|png)$/, 
            loader: "url?limit=8192"
        },
        {
            test: /\.scss$/, 
            loader: "style!css!sass"
        },
        {
            test: /\.js$/, 
            loader: "babel"
        }
    ]
}

好了，现在可以使用sass, es6了！

2.1 使用ES6

在./js/index.js中：

// ./src/js/index.js

class Student{
    constructor(name=''){
        this.name = name;
    }
    sayHello(){
        console.log( `hello, ${this.name}!` );
    }
}

var wenzi = new Student('wenzi');
wenzi.sayHello();

2.2 独立的CSS文件

目前页面中的样式，是从js里加载的。如果我们想要把css独立到一个单独的文件中，就需要一个extract-text-webpack-plugin插件了:

npm install extract-text-webpack-plugin --save-dev

webpack.config.js中：

// webpack.config.js
var ExtractTextPlugin = require("extract-text-webpack-plugin");


plugins : [
    new webpack.BannerPlugin('created at '+(new Date()).toLocaleString()),
    new ExtractTextPlugin("[name].css")
]

name就是entry中的key值。

3. 命令行

刚才上面我们用的webpack -p来编译的，这里还有几个命令也可以使用：

// webpack 命令行的几种基本命令

$ webpack --config XXX.js  // 使用另一份配置文件（比如webpack.config2.js）来打包
$ webpack -w // 提供watch方法，实时进行打包更新
$ webpack -p // 对打包后的文件进行压缩，提供production
$ webpack -d // 提供source map，方便调试。

使用webpack --watch可以监控文件变化，实时编译；在要发布到线上时，使用webpack -p编译为压缩版本的文件。

4. 总结

关于webpack的内容依然还有很多，这里我们仅仅是做了一些入门的讲解。更多的内容可以查看官网 https://doc.webpack-china.org/concepts 。后续我们也会讲解webpack的高级应用等

文章内容由蚊子的前端博客进行发布，或许你想看看他其他的文章呢： http://www.xiabingbao.com

原文地址： https://www.xiabingbao.com/post/webpack/webpack-started-tutor...