webpack小记
发布于 2 年前 作者 ghostcode 1995 次浏览 来自 分享

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文件。

github:https://github.com/ghostcode/webpackdemo

4 回复

今天刚好在看 webpack,学习了。 问楼主一个问题,用 npm 下载 bootstrap,用 webpack 有没有什么好办法引入?

@IchiNiNiIchi 实际项目中没有这个场景,所以只能推荐给你http://www.alloyteam.com/2016/01/webpack-use-optimization/,上面文章最后,你看看能满足否

@IchiNiNiIchi 昨天晚上又看了下,通过npm install bootstrap, 然后某个JS里面 :require(‘bootstrap/dist/css/bootstrap.css’),在webpack.conf.js的里添加: { test:/.(woff|woff2|eot|ttf|svg)(?.*$|$)/, loader:‘url-loader’ }

楼主写的很棒啊

回到顶部