webpack小记

1.安装webpack

前提得安装node(https://nodejs.org),官网下载安装即可。

npm install -g webpack

这样全局都可以使用webpack命令了

2.使用webpack

新建一个目录：webpackdemo,进入目录新建文件：entry.js，内容如下：

document.write('hello webpack world!')

新建index.html:

<html>
    <head>
        <meta charset="utf-8">
    </head>
    <body>
        <script type="text/javascript" src="bundle.js" charset="utf-8"></script>
    </body>
</html>

当前目录命令行运行：

webpack ./entry.js bundle.js

会在此目录下多出一个bundle.js文件，此时浏览器打开index.html，就会看到页面显示：

hello webpack world!

3.加入样式

在日常的开发中，不可能只有JS文件，我们还需要CSS的配合才能做出好的产品，默认情况下webpack只处理JS文件，处理其他文件需要特定的loader。比如：css-loader,style-loader。

安装loader：

npm install css-loader style-loader

style.css

body {
    background: yellow;
}

更新entry.js:

require('!style!css!./style.css');
document.write('hello webpack world!')

如果引入每个css文件前面都要加入这么多东西，很繁琐，所以我们可以bind：

更改entry.js:

require('./style.css');
document.write('hello webpack world!')

运行：

webpack ./entry.js bundle.js --module-bind 'css=style!css'

4.引入配置文件

其实像上面每次都要运行那么多命令，也是令人头痛。所以我们引入了webpack的配置文件，webpack.config.js:

let path = require('path');

module.exports = {
    entry:'./app.js',
    output:{
        path:path.join(__dirname,'/dist/'),
        filename:'bundle.js'
    },
    module:{
        loaders:[
            {test:/\.css$/,loader:'style!css'}
        ]
    }
}

执行webpack，就会生成bundle.js。

4.多入口配置

更改webpack.conf.js内容如下：

let path = require('path');

module.exports = {
    entry:{
        index:'./src/index.js',
        common:[//这里就是公共的文件
            './src/common.js',
            './src/common1.js'
        ]
    },
    output:{
        path:path.join(__dirname,'/dist/'),
        filename:'[name].js'//注意这里的name就是上面entry里的key：index，common
    },
    module:{
        loaders:[
            {test:/\.css$/,loader:'style!css'}
        ]
    }
}

运行webpack，在dist目录下就会生成：index.js和common.js。

5.提取css文件

上面的配置是直接把样式添加到页面的，我们需要提取css文件，提取文件需要插件：extract-text-webpack-plugin。

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

webpack.config.js更改如下：

let path = require('path');
let ExtractTextPlugin = require("extract-text-webpack-plugin");

module.exports = {
    entry:{
        index:'./src/index/index.js',
        list:'./src/list/list.js',
        common:[
            './src/common/common.js',
            './src/common/common1.js'
        ]
    },
    output:{
        path:path.join(__dirname,'/dist/'),
        filename:'[name].js'
    },
    module:{
        loaders:[
            {
                test:/\.css$/,
                loader:ExtractTextPlugin.extract('style-loader', 'css-loader')
            }
        ]
    },
    plugins:[
        new ExtractTextPlugin('[name].css')
    ]
}

运行webpack命令，会发现在dist目录下多了css文件。

webpack小记

推荐阅读更多精彩内容