webpack2基础教程

in Tutorials with 1 comment

目前webpack版本更新到2.3.0,官方文档依然是2.2的,其实区别不大,所以教程大致依然走文档路线风,也包含一点我个人实践和理解

什么是webpack

官方说它是一个现代的模块打包工具,基于JavaScript,有四大核心,分别是 Entry、Output、Loaders 和 Plugins。

基于这四个核心,可以帮助我们实现强大的前端开发任务流

安装webpack

通过npm安装

npm install webpack --save-dev

通过yarn安装 (brew install yarn)

yarn add webpack --dev

两者都会自动保存到package.json

配置webpack

到所在的项目里新建一个webpack.config.js文件

touch webpack.config.js

所有配置都是基于这个文件

Entry Points

官方那显示的是下面的配置方式

const config = {
  entry: './path/to/my/entry/file.js'
};

module.exports = config;

一般情况下,我们是用下面这种的,下面的代码例子也采用这种方式

module.exports = {
  entry: './path/to/my/entry/file.js'
}

这里的webpack的配置文件用的是CommonJS规范(require/exports),跟Node.js一样。但从2.0版本开始,webpack原生支持用ES6 module规范(import/export)去进行模块打包,这里是需要一点点的注意

see more

Output

output属性最少带有两个参数,一个是filename,另外一个是path

filename 建议是使用main.jsbundle.jsindex.js

配置如下

module.exports = {
  output: {
    filename: 'bundle.js',
    path: '/home/proj/public/assets'
  }
}

如果我们要多entry多output,则如下

module.exports = {
  entry: {
    app: './src/app.js',
    search: './src/search.js'
  },
  output: {
    filename: '[name].js',
    path: __dirname + '/build'
  }
}

执行后,将会输出./build/app.js, ./build/search.js

see more

Loaders

这里以babel-loader为例

安装Babel

yarn add babel-loader babel-core babel-preset-es2015 --dev

然后配置

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        use: [
          'babel-loader',
        ],
        exclude: /node_modules/
      }
    ]
  }
}

上面是官方的推荐的2.x版的module.rules写法,更语义~

在1.x版本之前,我们更多地是用module.loaders写法,如下

module.exports = {
  module: {
    loaders: [
      { test: /\.js$/, loader: 'babel-loader', exclude: /node_modules/ }
    ]
  }
}

这是需要我们注意

see more

Plugins

webpack是自带一些常用的插件,我们也安装其他webpack插件来配置

安装html-webpack-plugin

yarn add html-webpack-plugin --dev

配置webpack.config.js

const HtmlWebpackPlugin = require('html-webpack-plugin');
const webpack = require('webpack');
const path = require('path');

module.exports = {
  entry: './path/to/my/entry/file.js',
  output: {
    filename: 'my-first-webpack.bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      { test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ }
    ]
  },
  plugins: [
    new webpack.optimize.UglifyJsPlugin(),
    new HtmlWebpackPlugin({template: './src/index.html'})
  ]
}

如果是自带的插件,则需要require自身然后引用,如UglifyJsPlugin,如果是第三方插件,安装好之后直接require使用就可以了

see more

执行webpack

在终端内,进入项目目录,输入

webpack

其他常用命令参数

webpack – 执行一次开发构建
webpack -p – 执行一次生产构建
webpack --watch – 项目代码发生变化就执行一次开发构建
webpack -d - 采用source-map的形式显示

webpack Module

与Node.js单一的模块依赖规范不一样,webpack Module有多种模块规范去表述模块的依赖关系

例如

还有,通过Loader让webpack帮助我们支持更多不同类型的文件

内容不多,至此~

参考

Responses
  1. wanghao

    666 排版也挺好的 用什么写的啊 ?

    Reply