前端-11-webpack

1.概述

https://www.webpackjs.com/
版本更新很快
市场占有率最高的是3版
构建工具,自带模块化,commonjs规范
编译:
es6 -> es5
jsx -> es5
ts -> js
less -> css
gulp能做的webpack都可以做,gulp老版本处理
自带服务器,基于node(webpack-dev-server)
react vue都用到
版本问题
vue基于3.x版本
本教程基于3.x和4.x

2.环境

# 安装
npm install -g webpack@3.x
# 卸载
npm uninstall -g  webpack@3.x
# 安装4.x
# npm install -g webpack@4.x
# 目前不带@安装的是5.x版本
# 验证
webpack -v
# 4.x依赖
# 独立于webpack的工具
# npm install -g webpack-cli@2.x
# 目前最新的webpack@4.x版本使用webpack-cli@2.x会报错,需要安装webpack-cli@3.x版本
# 验证
webpack-cli -v
# 项目初始化
npm init
# 所有默认
npm init -y
# 安装webpack3.x 没有cli
npm install -D webpack@3.x
# 项目根目录创建src和dist文件夹
# src新建文件app.js
# 编译
webpack src/app.js dist/bundle.js
# 全局安装服务器
npm install -g webpack-dev-server@2.x
# 验证
webpack-dev-server -v
# 安装项目依赖
npm install -D webpack-dev-server@2.x
# 运行webpack服务器
webpack-dev-server
# 安装json-loader(当前版本已集成无需安装)
npm install -D json-loader
# es6->5
npm install -D babel-core babel-loader babel-preset-es2015

3 配置

# 创建webpack.config.js
# 入口和出口配置,简化命令
# 详情参考文档
----------------------------------
module.exports = {
    // 生成调试信息
    // devtool:"eval-source-map",
    entry: __dirname + "/src/app.js",
    output: {
        // 当前目录
        path: __dirname + "/dist",
        filename: "bundle.js"
    },
    module: {
        rules: [
            {
                test: /\.json$/,
                use: "json-loader"
            },
            {
                test: /\.js$/,
                use: "babel-loader"
            }
        ]
    }
}
----------------------------------
# 编译
webpack

# 命令别名
# package.json
--------------
  "scripts": {
    "build": "webpack",
    // 根路径 热更新 端口
    "dev": "webpack-dev-server --content-base dist --inline --port=8080"
  },
--------------
# 执行
npm run build
# 运行
npm run dev

4.react环境搭建

# 安装
npm install --save react react-dom
# webpack jsx->js
npm install --save-dev babel-preset-react
# 如果module报错删除重新下载(网络问题)
# 修改webpack.config.js
--------------------
            {
            // 匹配jsx或js
                test: /\.(js|jsx)$/,
                use: "babel-loader"
            }
-----------------------


# 创建.babelrc
------------------
{
  "presets": ["es2015", "react"]
}
------------------

# app.js
------------------
import React from "react"
import ReactDOM from "react-dom"

// 创建一个组件: app
class App extends React.Component{
  render() {
    return(
      <div>React EVN</div>
    )
  }
}

// 渲染
ReactDOM.render(<App />,document.getElementById("root"))
------------------

5.react组件

# hello.js
----------------------
import React from "react"

export default class Hello extends React.Component {
  render(){
      return(
        <div>hello</div>
      )
  }
}
----------------------
# app.js
----------------------
import React from "react"
import ReactDOM from "react-dom"
import Hello from "./hello"

// 创建一个组件: app
class App extends React.Component{
  render() {
    return(
      <div className="container"><Hello /></div>
    )
  }
}

// 渲染
ReactDOM.render(<App />,document.getElementById("root"))
----------------------

6.css图片处理

# 依赖
# css依赖
npm install -D css-loader style-loader
# 图片依赖
npm install -D file-loader url-loader
# 配置
-----------------
{
             test:/\.css$/,
             use:[
               "style-loader",
               "css-loader"
             ]
           },
          {
            test:/\.(png|jpg|gif|jpeg|svg)$/,
            use:"url-loader?limit=2048" // 大于2M进行压缩
          }
-----------------


# app.js
----------------------
// 引入css
import "./app.css"
...
<div className="container"><Hello /></div>
----------------------

# hello.js
----------------------
import logoImg from "./image/2017-2.png"

export default class Hello extends React.Component {
  render(){
      return(
        <div>
          <p>hello react</p>
          <img src={ logoImg } />
        </div>
      )
  }
}
----------------------

6.less (sass)

# 依赖
npm install --save-dev less less-loader
# 配置
-----------------------
          {
            test:/\.less$/,
            use:[
              "style-loader",
              "css-loader",
              "less-loader"
            ]
          }
-----------------------

# header/header.less
-----------------------
@bgcolor:green;
.header{
  background: @bgcolor;
}
-----------------------

# index.jsx
-----------------------
import React from "react"
import ReactDOM from  "react-dom"
import "./header.less"

export default class Header extends React.Component{
  render(){
    return(
      <div className="header">header111</div>
    )
  }
}
-----------------------

7.webpack插件

# 自动打开浏览器
npm install -D open-browser-webpack-plugin
# 配置
---------------------------
var borwerOpen = require("open-browser-webpack-plugin");
var HTMLTemp = require("html-webpack-plugin")

module.exports = {
    // 内置插件,省略后缀名
    resolve:{
      extensions:['.js','.jsx']
    },
...
  plugins:[
    // 自动打开浏览器插件
    new borwerOpen({
      url:"http://localhost:8080"
    }),

    // HTML模板
    new HTMLTemp({
      template:__dirname + "/src/index.temp.html"
    }),

    // 可在业务 js 代码中使用 __DEV__ 判断是否是dev模式（dev模式下可以提示错误、测试报告等, production模式不提示）
    new webpack.DefinePlugin({
      __DEV__: JSON.stringify(JSON.parse((process.env.NODE_ENV == 'dev') || 'false'))
    })
  ]
}
---------------------------

# html模板
index.temp.html
----------------
<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>
----------------
# 打包
npm run build

8.生产环境配置

# package.json
---------------
  "scripts": {
    "build": "cross-env NODE_ENV=production webpack --config ./webpack.production.config.js --progress",
    "dev": "cross-env NODE_ENV=dev webpack-dev-server --content-base dist --progress --inline"
  },
---------------
# webpack.production.config.js
---------------
var pkg = require('./package.json');
var webpack = require("webpack");
var borwerOpen = require("open-browser-webpack-plugin");
var HTMLTemp = require("html-webpack-plugin")
var path = require("path")

module.exports = {
  // devtool:"eval-source-map",
  entry:{
      app:path.resolve(__dirname, 'src/app.js'),
      // 将 第三方依赖（node_modules中的） 单独打包
      vendor: Object.keys(pkg.dependencies)
  },
  output:{
    // __dirname：当前目录
    path:__dirname + "/dist",
    filename:"bundle.js"
  },
  // 省略后缀名
  resolve:{
       extensions:['.js','.jsx']
  },
  module:{
    rules:[
      {
        test:/\.json$/,
        use:"json-loader"
      },
      {
        test:/\.(js|jsx)$/,
        use:"babel-loader"
      },
      {
        test:/\.css$/,
        use:[
          "style-loader",
          "css-loader"
        ]
      },
      {
        test:/\.(png|jpg|gif|jpeg|svg)$/,
        use:"url-loader?limit=2048" // 大于2M进行压缩
      },
      {
        test:/\.less$/,
        use:[
          "style-loader",
          "css-loader",
          "less-loader"
        ]
      }
    ]
  },
  plugins:[
    // webpack 内置的 banner-plugin
    new webpack.BannerPlugin("@Copyright Vincent 2018/7/31"),
    // 自动打开浏览器插件
    new borwerOpen({
      url:"http://localhost:8080"
    }),

    // 定义为生产环境，编译 React 时压缩到最小
    new webpack.DefinePlugin({
      'process.env':{
        'NODE_ENV': JSON.stringify(process.env.NODE_ENV)
      }
    }),

    // 压缩去掉警告
    new webpack.optimize.UglifyJsPlugin({
        compress: {
          //supresses warnings, usually from module minification
          warnings: false
        }
    }),

    // 提供公共代码
    new webpack.optimize.CommonsChunkPlugin({
      name: 'vendor',
      filename: '/js/[name].[chunkhash:8].js'
    }),


    // HTML模板
    new HTMLTemp({
      template:__dirname + "/src/index.temp.html"
    }),

    // 可在业务 js 代码中使用 __DEV__ 判断是否是dev模式（dev模式下可以提示错误、测试报告等, production模式不提示）
    new webpack.DefinePlugin({
      __DEV__: JSON.stringify(JSON.parse((process.env.NODE_ENV == 'dev') || 'false'))
    })
  ]
}
---------------

参考:
北京尚学堂·百战程序员 - 前端 - 09_前端构建工具 - 01- Webpack