webpack教程(2)_H5之家 - 中国HTML5教程资源分享第一站

module.exports = { entry: { app: [‘./main.js‘] }, output: { filename: ‘bundle.js‘ }, module: { loaders: [{ test: /\.js$/, loaders: [‘babel?presets[]=es2015‘], exclude: /node_modules/ }] } }

这样我们就可以在我们的 js 文件中使用 ES6 语法，babel-loader 会负责编译成浏览器可以识别的格式。

CSS 加载器

我们可以按传统方法使用 CSS，即在 HTML 文件中添加：

但 webpack 里，CSS 同样可以模块化，使用 import 导入。

因此我们不再使用 link 标签来引用 CSS，而是通过 webpack 的 style-loader 及 css-loader。前者将 css 文件以 <style></style> 标签插入 <head> 头部，后者负责解读、加载 CSS 文件。

安装 CSS 相关的加载器

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

配置 webpack.config.js 文件

{ module: { loaders: [ { test: /\.css$/, loaders: [‘style‘, ‘css‘] } ] } }

在 main.js 文件中引入 css

import‘./style/app.css‘;

这样，在执行 webpack 后，我们的 CSS 文件就会被打包进 bundle.js 文件中，如果不想它们被打包进去，可以使用 extract text 扩展。

模块化 CSS

上一步里，我们 import 到 JavaScript 文件中的 CSS 文件中的 CSS 在打包后是仍然是全局的，也就是说，我们只是换了种加载 CSS 的方式，在书写 CSS 的时候，还是需要注意使用命名规范，比如使用 BEM，否则全局环境 CSS 类的冲突等问题不会消失。

这里，webpack 做了一个模块化 CSS 的尝试，真正意思上的「模块化」，即 CSS 类不会泄露到全局环境中，而只会定义在 UI 模块内 – 类似 react.js 这类模块，或者 web components。

autoprefixer

我们在写 CSS 时，按 CSS 规范写，构建时利用 autoprefixer 可以输出 -webkit、-moz 这样的浏览器前缀，webpack 同样是通过 loader 提供该功能。

安装 autoprefixer-loader

npm install autoprefixer-loader --save-dev

配置 webpack.config.js

loaders: [{ test: /\.css$/, loader: ‘style!css!autoprefixer?{browsers:["last 2 version", "> 1%"]}‘, }]

重启 webpack-dev-server

假如我们在 CSS 中写了 body { display: flex; } 规则，再查看 bundle.js 文件的话，我们能看到类似如下的代码：

body {\n\tdisplay: -webkit-box;\n\tdisplay: -webkit-flex;\n\tdisplay: -ms-flexbox;\n\tdisplay: flex;\n}

图片

图片同样可以是模块，但使用的是 file loader 或者 url loader，后者会根据定义的大小范围来判断是否使用 data url。

import loadingIMG from ‘file!../img/loading.gif‘ React.render(<img src={loadingIMG} />, document.getElementById(‘app‘));

打包、构建

项目结束后，代码要压缩、混淆、合并等，只需要在命令行执行：

$ webpack

即可，webpack 根据 webpack.config.js 文件中的配置路径、构建文件名生成相应的文件。通常，我们会额外定义一个专门用于生产环境的配置文件，比如webpack.production.config.js，其中可以做许多代码优化。

webpack教程

标签：编译还需安装完成初始化通过 html mat 项目目录包管理器