webpack learning 1

发表于 | 分类于

Webpack learning

前言

目的

使用 webpack 打包单页应用

目录结构

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
│  index.html
│  package-lock.json
│  package.json
│  webpack.config.js
│  
├─dist
│      app.ddc8e77.js
│      index.html
│      ventor.js
└─src
    │  a.js
    │  index.js
    │  
    ├─image
    │      1.png
    │
    └─style
            index.css
            index.less

最终的目录结构: dist 是 build 的目录, src 是 source 目录，webpack.config.js 为 webpack 的配置文件

package.json

1
2
3
4
"scripts": {
  "start": "webpack-dev-server  --hot --inline  --devtool eval --progress --colors",
  "build": "webpack"
}

npm start 启动 webpack-dev-server 来 watch 文件变化，并且自动刷新页面

npm run build 启动 build 过程，构建应用

开始

创建一个文件夹，并生成 package.json

1
2
3
mkdir webpack-learning
cd webpack-learning
npm init -y

安装 webpack 和 webpack-dev-server

1
npm i webpack webpack-dev-server -D

新建文件: webpack.config.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
const path = require('path') //path模块
module.exports = {
  entry: {
    app: path.resolve(__dirname, './src/main.js')
  }, //入口
  output: {
    path: path.resolve(__dirname, './dist/js'),
    filename: '[name].[hash:7].js' //[name]会被入口中的key代替，此处为app
  }, //输出
  module: {
    loaders: []
  },
  plugins: []
}

在 src 中新建main.js

随便写一些代码 执行npm run build

最后在输出文件到/dist/js/app.e924425.js

添加一些 modules 和 plugins

添加 modules 即一些类型的 loader

####将代码转为 es2015 需添加 babel-loader

1
npm i babel-loader babel-core babel-preset-es2015 -D

在 webpack.config.js 中添加

1
2
3
4
5
6
7
8
9
module: {
  loaders: [
    {
      test: /\.js[x]?$/,
      exclude: /node_modules/,
      loader: 'babel-loader?presets[]=es2015'
    }
  ]
}

这里的 test 是匹配文件

这里编译以后会将

1
2
3
4
5
const st = 'world'
console.log(`hello ${st}`)
//转成
var st = 'world'
console.log('hello ' + st)

添加 less css style loader

1
npm i less less-loader css-loader style-loader -D

在 webpack.config.js 中添加

1
2
3
4
5
6
7
8
9
10
11
12
13
module: {
    loaders: [
      {
        test: /\.js[x]?$/,
        exclude: /node_modules/,
        loader: 'babel-loader?presets[]=es2015'
      },
      {
        test: /\.less$/,
        loader: 'style-loader!css-loader!less-loader'
      },
    ]
  }

这里要说明一下这个 loader 他执行顺序是从右向左，也就是先 loader less 把 less 转为 css 再 loader css 把 css 丢到 js 里面。

其他 loader 套路都差不多，图片等资源文件使用 url-loader

添加 plugins

目前使用的 plugins 不多。需要安装的有

1
2
3
const UglifyJSPlugin = require('uglifyjs-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const CleanWebpackPlugin = require('clean-webpack-plugin')
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
plugins: [
  new UglifyJSPlugin(),
  new HtmlWebpackPlugin({
    filename: 'index.html',
    template: 'index.html',
    inject: true
  }),
  new webpack.optimize.CommonsChunkPlugin({
    name: 'vendor',
    filename: 'ventor.js'
  }),
  new CleanWebpackPlugin(['dist'], {
    root: __dirname,
    verbose: true,
    dry: false
  })
]

HtmlWebpackPlugin这个插件可以将生成的 js 自动插入 html 里面

CommonsChunkPlugin当然是公共模块的插件

CleanWebpackPlugin因为每次 build 后 js 会带 hash 值，文件名不一样，为了防止目录变得

1
2
3
4
-js
---app.a1b467a.js
---app.e924425.js
....

如此的臃肿，所以 build 的时候应当清空 dist 目录。这个插件就是用来清空 dist 目录的

结束

最后我们的webpack.config.js长这样子

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
const path = require('path')
const UglifyJSPlugin = require('uglifyjs-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const CleanWebpackPlugin = require('clean-webpack-plugin')
const webpack = require('webpack')
module.exports = {
  entry: {
    app: path.resolve(__dirname, './src/main.js')
  },
  output: {
    path: path.resolve(__dirname, './dist/js'),
    filename: '[name].[hash:7].js',
    chunkFilename: '[id].bundle.[hash:7].js'
  },
  module: {
    loaders: [
      {
        test: /\.js[x]?$/,
        exclude: /node_modules/,
        loader: 'babel-loader?presets[]=es2015&presets[]=react'
      },
      {
        test: /\.less$/,
        loader: 'style-loader!css-loader!less-loader'
      },
      {
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 100,
          name: '[name].[hash:7].[ext]'
        }
      }
    ]
  },
  plugins: [
    new UglifyJSPlugin(),
    new HtmlWebpackPlugin({
      filename: 'index.html',
      template: 'index.html',
      inject: true
    }),
    new webpack.optimize.CommonsChunkPlugin({
      name: 'vendor',
      filename: 'ventor.js'
    }),
    new CleanWebpackPlugin(['dist'], {
      root: __dirname,
      verbose: true,
      dry: false
    })
  ]
}

这里推荐一个不错的教程webpack-howto

下回，多页的 webpack