前端学习环境准备 (4)WebPack

默认打包 JavaScript, 分析依赖打包成文件.

要支持 css, html 等还需要添加不同的 loader.

安装

npm install webpack -g

npm install webpack --save-dev

简单使用

webpack app/main.js app/bundle.js

添加 Loader 支持 Css

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

引入 css 的语法为 require('style!css!./style.css'), 使用 css loader 将 css 解析出来, 使用 style loader 将其转换成 js 语法引入到 js 文件中. (不再存在 css 文件, 直接使用 js 操作样式.)

使用配置文件 webpack.config.js

module.exports = {
  entry: './entry.js',
  output: {
    path: __dirname,
    filename: 'bundle.js'
  },
  devtool: 'source-map',
  module: {
    loaders: [{ test: /\.css$/, loader: 'style!css' }]
  }
};

entry 为入口文件, output 为输出目录和打包文件名.
devtool 指定生成 source-map 文件.
module.loader 表示以 .css 为扩展名的要使用 ‘style!css!’ 来解析, 这样就直接使用 require('./style.css'); 引入 css 即可.

生成过程中指定了 source-map 的话, 可以在 js 文件中增加 debugger; 来添加浏览器断点.

结合 babel

npm install babel babel-loader babel-core babel-preset-2015 --save-dev

创建 babel 配置文件 .babelrc

1	{ "presets": ["es2015"] }

webpack.config.js -> module.loader

1	{test: /\.js$/, loader: 'babel'}

生成开发用服务器 webpack-dev-server

生成测试服务器, 模块热替换 [–hot] 只替换有更新部分.

npm install webpack-dev-server -g

npm install webpack-dev-server --save-dev

运行: webpack-dev-server --inline --hot