跟风 Webpack

最新推荐文章于 2025-06-10 23:06:38 发布

转载最新推荐文章于 2025-06-10 23:06:38 发布 · 719 阅读

10 篇文章

订阅专栏

之所以学习它是因为最近又长草于React,发现在GitHub上的许多项目都提到了它.我现在对它只是一知半解,本着保持饥饿的学习态度.我们开始拔草吧.
由于英文水平有限,我习惯于先搜一下中文资料对它有个大概的了解.
我找到了这篇文章一小时包教会,嗯.我喜欢这个标题.

一. 初始并安装

新建一个工程来开始我的练习,在工作空间下新建一个webpack-baby_steps文件夹,并初使化这个工程.

npm init

使用npm安装webpack.并写到package.json中

npm install webpack --save-dev

一. 配置

要让它为我们工作,我们需要告诉它我们需要干什么.在工程目录下新建一个webpack.config.js这是必需的.

var webpack = require('webpack');
var commonsPlugin = new webpack.optimize.CommonsChunkPlugin('common.js');

module.exports = {
    //插件项
    plugins: [commonsPlugin],
    //页面入口文件配置
    entry: {
        index : './src/js/page/index.js'
    },
    //入口文件输出配置
    output: {
        path: 'dist/js/page',
        filename: '[name].js'
    },
    module: {
        //加载器配置
        loaders: [
            { test: /\.css$/, loader: 'style-loader!css-loader' },
            { test: /\.js$/, loader: 'jsx-loader?harmony' },
            { test: /\.scss$/, loader: 'style!css!sass?sourceMap'},
            { test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192'}
        ]
    },
    //其它解决方案配置
    resolve: {
        root: 'D:/workspace/vs/webpack-baby_steps/src', //绝对路径
        extensions: ['', '.js', '.json', '.scss'],
        alias: {
            AppStore : 'js/stores/AppStores.js',
            ActionType : 'js/actions/ActionType.js',
            AppAction : 'js/actions/AppAction.js'
        }
    }
};

从上到下我们看一下每部分都是干什么的.

首先引入webpack模块.因为下面的配置都是基于它的.
下一行的CommonsChunkPlugin其实是一个插件,它的作用是提取多个页面的公共模块到一个文件中.例如a.html中需要a.js模块,而a.js模块依赖于jquery,bootstrap.js,one.js. 这时我们又增加了一个b.html页,它里面需要b.js模块,同样的b.js中依赖于jquery,bootstrap.js,two.js. 这时CommonsChunkPlugin插件就会帮我们生成一个common.js文件包含jquery,bootstrap.js这两个模块的文件.
在往下看plugins,它的作用是配置我们需要的插件,如上面的CommonsChunkPlugin.
entry,output这两个属性分别对应着入口文件配置和输出文件配置信息,

{
    entry: {
        page1: "./page1",
        //支持数组形式，将加载数组中的所有模块，但以最后一个模块作为输出
        page2: ["./entry1", "./entry2"]
    },
    output: {
        path: "dist/js/page",
        filename: "[name].bundle.js" //name取值为entry中的key
    }
}

该代码将在dist/js/page目录下生成page1.bundle.js,page2.bundle.js
5. module.loaders告知 webpack 每一种文件都需要使用什么加载器来处理

 module: {
    //加载器配置
    loaders: [
        //.css 文件使用 style-loader 和 css-loader 来处理
        { test: /\.css$/, loader: 'style-loader!css-loader' },
        //.js 文件使用 jsx-loader 来编译处理
        { test: /\.js$/, loader: 'jsx-loader?harmony' },
        //.scss 文件使用 style-loader、css-loader 和 sass-loader 来编译处理
        { test: /\.scss$/, loader: 'style!css!sass?sourceMap'},
        //图片文件使用 url-loader 来处理，小于8kb的直接转为base64
        { test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192'}
    ]
}

resolve

resolve: {
    //查找module的话从这里开始查找
    root: process.cwd() + '/src', //绝对路径
    //自动扩展文件后缀名，意味着我们require模块可以省略不写后缀名
    extensions: ['', '.js', '.json', '.scss'],
    //模块别名定义，方便后续直接引用别名，无须多写长长的地址
    alias: {
        AppStore : 'js/stores/AppStores.js',//后续直接 require('AppStore') 即可
        ActionType : 'js/actions/ActionType.js',
        AppAction : 'js/actions/AppAction.js'
    }
}

二. 打包

运行webpack 当出错时显示详细信息.

webpack --display-error-details

其它参数还有

$ webpack --config XXX.js   //使用另一份配置文件（比如webpack.config2.js）来打包

$ webpack --watch   //监听变动并自动打包

$ webpack -p    //压缩混淆脚本，这个非常非常重要！

$ webpack -d    //生成map映射文件，告知哪些模块被最终打包到哪里了

三. 使用

具体使用时直接在页面中引入打包生成的文件即可

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title>demo</title>
</head>
<body>
  <script src="dist/js/page/common.js"></script>
  <script src="dist/js/page/index.js"></script>
</body>
</html>