webpack入门教程--3

webpack打包还可以使用配置文件，我们先创建一个叫做webpack.config.js的文件。这里需要注意一下，这个JS文件的名字不是我们胡乱写的，也是不能更改的，因为webpack 命令执行后，会默认载入当前目录webpack.config.js 文件。

然后在这个JS文件中我们输入以下代码：

module.exports = {

    entry: "./book1.js",

    output: {

        path: __dirname,

        filename: "bundle.js"

    },

    module: {

        loaders: [

            { test: /\.css$/, loader: "style-loader!css-loader" }

        ]

    }

};

，接下来我们要在Git中输入webpack命令;

webpack

然后回车，我这里是报了个错，

$ webpack

The CLI moved into a separate package: webpack-cli.

Please install 'webpack-cli' in addition to webpack itself to use the CLI.

-> When using npm: npm install webpack-cli -D

-> When using yarn: yarn add webpack-cli -D

是告诉我们缺少东西，不要着急，我们安装就可以了；

$ cnpm install webpack-cli -D

安装成功以后，然后在输入webpack就可以了。这时候就可以编译通过了。

我们就可以直接在index.html中查看已经打包成功了，如果我们不确定的话，我么你可以更改css文件中的颜色，让我们的改变更容易察觉出来。

　　当然，webpack的插件是非常丰富的，我们需要在webpack.config.js文件中添加一个plugins 选项。用于完成一些 loader 不能完成的工。webpack 自带一些插件，你可以通过 cnpm 安装一些插件。使用内置插件需要通过以下命令来安装：

cnpm install webpack --save-dev

修改 webpack.config.js，代码如下：

var webpack=require('webpack');

module.exports = {

    entry: "./book1.js",

    output: {

        path: __dirname,

        filename: "bundle.js"

    },

    module: {

        loaders: [

            { test: /\.css$/, loader: "style-loader!css-loader" }

        ]

    },

    plugins:[

    new webpack.BannerPlugin('这是注释--程先生哈的博客园')

    ]

};

然后运行:Git命令，webpack，然后我们就可以发现bundle.js。可以看到我们的头部出现了我们制定的注释信息；到这里其实我们就已经简单的讲解了webpack打包。但是在实际的工作开发环境中，当项目逐渐变大，webpack 的编译时间会变长，可以通过参数让编译的输出内容带有进度和颜色。

webpack --progress --colors

如果不想每次修改模块后都重新编译，那么可以启动监听模式。开启监听模式后，没有变化的模块会在编译后缓存到内存中，而不会每次都被重新编译，所以监听模式的整体速度是很快的。

webpack --progress --colors --watch

当然，我们可以使用 webpack-dev-server 开发服务，这样我们就能通过 localhost:8080 启动一个 express 静态资源 web 服务器，并且会以监听模式自动运行 webpack，在浏览器打开 http://localhost:8080/ 或 http://localhost:8080/webpack-dev-server/ 可以浏览项目中的页面和编译后的资源输出，并且通过一个 socket.io 服务实时监听它们的变化并自动刷新页面。

# 安装

cnpm install webpack-dev-server -g

# 运行

webpack-dev-server --progress --colors

巴特西

webpack入门教程--3

最新文章

热门文章