前端构建工具webpack

发表于 | 分类于 | 阅读次数：
本文字数： 7.5k | 阅读时长 ≈ 7 分钟

webpack 官网

https://webpack.docschina.org/concepts/

一.webpack3.x版本安装

  1. webpack是什么？

    1. webpack构建工具
    2. 自带模块化（commonjs规范）
    3. 编译：es6=》es5，jsx=》es5，ts（typescript）=》js
    4. gulp所做的事情，webpack都可以做dao
    5. 自带服务器，服务器也是基于Node（webpack-dev-server）
    6. 哪些环境经常使用到webpack：react，vue
    7. webpack版本：1.x，2.x，3.x，4.x版本

  2. 安装webpack3.x：

    1. 安装全局webpack

      npm install -g webpack@3.x

      npm install -g webpack-cli@2.x（使用webpack-cli2.x版本，目前最新版本3.x版本）（webpack4以上用到脚手架）

    2. 到项目根目录，项目初始化package.json

      npm init -y

    3. 安装项目依赖的webpack

      npm install -D webpack@3.x

    4. 项目根目录创建两个文件夹src和dist

      src：源码文件

      dist：编译之后的文件

    5. 编写代码

      app.js

      1
      document.write('hello webpack');

    6. 执行webpack

      webpack 路径/入口文件 路径/出口文件

      1
      webpack src/app.js dist/bundle.js

    7. 编写代码

      hello.js：

      1
      2
      3
      4
      5
      module.export = function(){
          var hello = document.createElement('div');
          hello.textContent = 'hello Webpack3.x';
          return hello;
      }

二.webpack.config配置文件

  1. 生成webpack.config.js文件

    配置入口和出口

    1
    2
    3
    4
    5
    6
    7
    module.exports = {
        entry:__dirname + '/src/app.js',
        output:{
            path:__dirname + '/dist',
            filename:'bundle.js'
        }
    }

  2. webpack执行的快捷方案

    在package.json文件中代替webpack执行

    1
    2
    3
    "script":{
        "build":"webpack"
    }

    执行：npm run build

  3. 调试

    生成错误信息文件

    在配置文件webpack.config.js文件中添加：

    devtool：”eval-source-map”

    (devtool：”eval-source-map/eval/source-map/hidden-source-map/inline-source-map/eval-source-map/cheap-source-map/cheap-moudle-source-map”)

三.webpack服务器搭建

  1. 服务器

    1. 全局安装服务器

      npm install -g webpack-dev-server@2.x

    2. 安装项目依赖

      npm install -D webpack-dev-server@2.x

    3. 运行webpack服务器

      webpack-dev-server

    4. 配置服务器的快捷执行方案

      1
      2
      3
      4
      "script":{
          "build":"webpack",
          "dev":"webpack-dev-server"
      }

      执行：npm run dev

    5. 修改服务器根路径

      1
      2
      3
      4
      "script":{
          "build":"webpack",
          "dev":"webpack-dev-server --content-base dist"
      }

    6. 热更新

      1
      2
      3
      4
      "script":{
          "build":"webpack",
          "dev":"webpack-dev-server --content-base dist --inline --hot"
      }

    7. 服务器配置

      –content-base: 指定服务器运行目录

      –inline：在线更新

      –port：修改端口

四.loaders配置

  1. module

    loader（use）

    loader是webpack可以通过配置脚本，或者外部依赖执行一些功能

    例如：es6 -》es5，jsx-》js，less-》css

    1. 配置loaders

      1. test：一个匹配loader要操作的文件的一个正则表达式（必须）
      2. loader：loader要执行的任务的名字（必须）
      3. options：为loader提供一些外部选项配置（可选项）

    2. json格式的数据转化成js对象

      注意：当前的json-loader只是为了测试，当前安装的webpack3.x已经集成了json-loader，不需要单独安装了

      1. 安装json-loader

        npm install -D json-loader

      2. 编写配置文件代码

        1
        2
        3
        rules: [
              { test: /\.json$/, use: 'json-loader' }
            ]

    3. es6 -> es5

      1. 安装依赖

        npm install -D babel-core babel-loader babel-preset-es2015

      2. 配置webpack.config.js文件

        1
        2
        3
        4
        5
        6
        7
        rules: [
            { test: /\.js$/, use: 'babel-loader',
             // webpack2.0的方案，3.0以后用 .babelrc 文件
             options:{
                presets:['es2015']
            } }
            ]

五.React环境搭建

  1. 构建react环境(webpack+ES6+React)

    1. 安装react

      npm install –save react react-dom

      npm install –save-dev babel-preset-react

    2. 编写配置文件

      1
      2
      3
      4
      5
      6
      7
      8
      module.exports = {
        module: {
          rules: [
            { test: /\.js|jsx$/, use: 'babel-loader' },
            
          ]
        }
      };

      增加 .babelrc 文件

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      {
          "presets":["react","es2015"],
          //针对于react环境配置
          "env":{
              "dev":{
                  "plugins":[
                      ["react-transform",{
                          "transforms":[{
                              "transform":"react-transform-hmr",
                              "imports":["react"],
                              "locals":["module"]
                          }]
                      }]
                  ]
              }
          }
      }

    3. 编写代码

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      import React from "react"
      import ReactDOM from "react-dom"

      class App extends React.Component{
          render(){
              return(
              <div>hello</div>
              )
          }
      }
      ReactDOM.render(<App/>,document.getElementById("root"))

六.webpack处理css和图片

  1. CSS处理

    1. 安装css相关依赖

      npm install -D css-loader style-loader

    2. 添加配置

      1
      2
      3
      4
      5
      6
      7
      8
      9
      module.exports = {
        module: {
          rules: [
            { test: /\.js|jsx$/, use: 'babel-loader' },
              {test:/\.css$/, use:["style-loader","css-loader"]}
            
          ]
        }
      };

  2. 图片配置

    1. 安装依赖

      npm install -D file-loader url-loader

    2. 添加配置

      1
      2
      3
      4
      {
          test:/\.(png|jpj|gif|jpeg|svg)$/,
          use:"url-loader?limit=2048" //大于2m进行压缩
      }

七.webpack less-loader添加

  1. Less和Sass

    1. 安装

      npm install –save-dev less less-loader

    2. 添加配置

      1
      2
      3
      4
      5
      6
      test:/\.less$/,
          use:[
              "style-loader",
              "css-loader",
              "less-loader"
          ]

八.webpack插件添加

  1. 插件（plugins）

    1. 打开浏览器

      安装：

      npm install -D open-browser-webpack-plugin

      配置：

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      23
      const openBrowserWebpackPlugin = require('open-browser-webpack-plugin'); //通过 npm 安装
      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|jsx)$/,
              use: 'babel-loader'
            }
          ]
        },
        plugins: [
            //自动打开浏览器插件
          new openBrowserWebpackPlugin({url:'http://localhost:8080'})
        ]
      };

    2. HTML模板

      安装：

      npm install -D html-webpack-plugin

      配置：

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      23
      const HtmlWebpackPlugin = require('html-webpack-plugin'); //通过 npm 安装
      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|jsx)$/,
              use: 'babel-loader'
            }
          ]
        },
        plugins: [
            //HTML模板
          new HtmlWebpackPlugin({template: __dirname +'/src/index.html'})
        ]
      };

    3. 内置插件(省略导入文件的后缀名)

      1
      2
      3
      resolve:{
          extensions:['.js','jsx']
      }

九.webpack生产环境

webpack.config.js

1
2
3
4
5
6
7
const webpack = require('webpack');

// 可在业务js代码中使用__DEV__,判断是否是dev模式，dev模式下可以提示错误，测试报告等，production模式下不提示

new webpack.DefinePlugin({
    __DEV__:JSON.stringfy(JSON.parse((process.env.NODE_ENV == 'dev') || 'false'))
})

webpack.production.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
const pkg = require('./package.json')

module.exports = {
    entry:{
        app:path.resolve(__dirname,'src/index.js'),
        //将第三方依赖（node_modules中的）单独打包
        vendor: Object.keys(pkg.dependencies)
    },
    plugins: [
        //webpack内置的banner-plugin
        new webpack.BannerPlugin("@haiyang 2018/10/10"),
        
        // 定义为生产环境，编译react时压缩到最小
        new webpack.DefinePlugin({
            'process.env':{
                'NODE_ENV':JSON.stringfy(process.env.NODE_ENV)
            }
        }),
        
        // 压缩去掉警告
        new webpack.optimize.UglifysPlugin({
            compress:{
                warnings:false
            }
        }),
        
        // 
        new webpack.optimize.CommonsChunkPlugin({
            name:'vendor',
            filename:'/js/[name].[chhunkhash:8].js'
        }),
        
        // 可在业务js代码中使用 __DEV__,判断是否是dev模式
new webpack.DefinePlugin({
    __DEV__:JSON.stringfy(JSON.parse((process.env.NODE_ENV == 'dev') || 'false'))
    ]
}

生产环境的搭建

安装：

npm install -D cross-env

npm install -D babel-plugin-react-transform

npm install -D react-transform-hmr

十.webpack4.x版本升级

  1. 更新版本

    npm install -g webpack

    npm install -g webpack-cli@2.x

  2. 写代码

  3. 执行：

    webpack –mode=development ./src/index.js

    –mode 模式（必选，不然会报错），是4.x 新增的参数，默认是production

  4. 新的命令行

    webpack-cli init：自动生成webpack.config.js

如果觉得文本对您有帮助，欢迎打赏