Yarn安装

npm i yarn -g

image.png

webpack

• 使用版本3.10.0
• yarn add webpack@3.10.0 --dev

需要处理的文件里类型

• HTML -> html-webpack-plugin
• 脚本 -> babel + babel-preset-react
• 样式 -> css-loader + sass-loader
• 图片/字体 -> url-loader + file-loader

webpack常用模块

• html-webpack-plugin html单独打包成文件
• extract-text-webpack-plugin 样式打包成单独文件
• CommonsChunkPlugin 提出通用模块

webpack-dev-server

• 为webpack项目提供web服务
• 使用2.9.7
• 更改代码自动刷新,路径转发
• yarn add webpack-dev-server@2.9.7 --dev
• 解决多版本共存问题

开始配置

安装webpack

// 创建git 
git init
// 初始化项目
yarn init

// 安装webpack
yarn add webpack@3.10.0 --dev

const path = require('path');
module.exports = {
  entry: './src/app.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'app.js'
  }
};

在项目中新建一个webpack.config.js,然后新建src/app.js

image.png

// 执行
node_modules/.bin/webpack

这个文件就被打包了

配置HTML

// 安装
yarn add html-webpack-plugin@2.30.1 --dev

新建一个src/index.html

// 引入
const HtmlWebpackPlugin = require('html-webpack-plugin')

// 写插件
plugins: [
  new HtmlWebpackPlugin({
      template: './src/index.html'
  })
]

执行后会将app.js自动引入进html中

处理脚本

// 安装 解析ES6
yarn add babel-loader@7.1.2 babel-core@6.26.0 babel-preset-env@1.6.1 --dev

// 配置loader
module: {
  rules: [
    {
      test: /\.js$/,
      exclude: /(node_modules)/,  //对这个不做处理
      use: {
        loader: 'babel-loader',
        options: {
          presets: ['env']
        }
      }
    }
  ]
}

React的配置

// 安装解析jsx的babel包
yarn add babel-preset-react@6.24.1 --dev

module: {
  rules: [
    {
      test: /\.jsx$/,
      exclude: /(node_modules)/,  //对这个不做处理
      use: {
        loader: 'babel-loader',
        options: {
          presets: ['env','react']    //在react环境下,也可以进行打包
        }
      }
    }
  ]
}

// 安装React
yarn add react@16.2.0 react-dom@16.2.0

此时做一个实验将app.js -> app.jsx,然后修改入口文件

// app.jsx
import React from 'react';
import ReactDOM from 'react-dom';

ReactDOM.render(
  <h1>Hello, world!</h1>,
  document.getElementById('root')
);

最后解析成了ES5的形式,可以解析jsx了

解析CSS

// 安装
yarn add style-loader@0.19.1 css-loader@0.28.8 --dev

// 添加rules规则
{
  test: /\.css$/,
  use: [ 'style-loader', 'css-loader' ]
}

此时css就被成功引入了,但是css被解析成js的形式,因此我们要将css单独拿出来,需要用到ExtractTextWebpackPlugin

// 安装
yarn add extract-text-webpack-plugin@3.0.2 --dev

// 引入插件
const ExtractTextWebpackPlugin = require('extract-text-webpack-plugin')

{
  test: /\.css$/,
  use: ExtractTextWebpackPlugin.extract({
    fallback: "style-loader",
    use: "css-loader"
  })
}

// new
new ExtractTextWebpackPlugin("index.css")

解析scss

一定要安装node-sass

// 安装 scss-loader
yarn add sass-loader@6.0.6 node-sass@4.7.2 --dev

{
  test: /\.scss$/,
  use: ExtractTextWebpackPlugin.extract({
    fallback: 'style-loader',
    use: ['css-loader', 'sass-loader']
  })
}

处理图片

// 安装
yarn add file-loader@1.1.6 url-loader@0.6.2 --dev

{
  test: /\.(png|jpg|gif)$/,
  use: [
    {
      loader: 'url-loader',
      options: {
        limit: 8192
      }
    }
  ]
}

引入字体图标

// 安装
yarn add font-awesome

{
  test: /\.(woff|woff2|eot|ttf|otf|svg)$/,
  use: [
    {
      loader: 'url-loader',
      options: {
        limit: 8192
      }
    }
  ]
}

提取公共模块

// 提出公共模块
new webpack.optimize.CommonsChunkPlugin({
  name: 'common',   // 公共模块名
  filename: 'js/base.js'  // 打包的目录
})

webpack-dev-server

// 安装
yarn add webpack-dev-server@2.9.7 --dev

在plugin下加上

devServer: {
    
}

// 运行
node_modules/.bin/webpack-dev-server

但是会出现路径的问题,需要添加publicPath

image.png

加脚本

// package.json
"scripts" : {
  "dev" : "node_modules/.bin/webpack-dev-server",
  "dist" : "node_modules/.bin/webpack"
}

最终

const path = require('path');
const webpack = require('webpack')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const ExtractTextPlugin = require('extract-text-webpack-plugin')
module.exports = {
  entry: './src/app.jsx',
  output: {
    path: path.resolve(__dirname, 'dist'),
    publicPath: '/dist/',
    filename: 'js/app.js'
  },
  module: {
    rules: [
      {
        test: /\.jsx$/,
        exclude: /(node_modules)/,  //对这个不做处理
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['env','react']
          }
        }
      },
      {
        test: /\.css$/,
        use: ExtractTextPlugin.extract({
          fallback: "style-loader",
          use: "css-loader"
        })
      },
      {
        test: /\.scss$/,
        use: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: ['css-loader', 'sass-loader']
        })
      },
      {
        test: /\.(png|jpg|gif)$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 8192,
              name: 'resource/[name].[ext]'   // 路径
            }
          }
        ]
      },
      {
        test: /\.(woff|woff2|eot|ttf|otf|svg)$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 8192,
              name: 'resource/[name].[ext]'   // 路径
            }
          }
        ]
      },
      
    ]
  },
  plugins: [
    // 处理HTML文件
    new HtmlWebpackPlugin({
        template: './src/index.html'
    }),
    // 独立css文件
    new ExtractTextPlugin("css/[name].css"),
    // 提出公共模块
    new webpack.optimize.CommonsChunkPlugin({
      name: 'common',   // 公共模块名
      filename: 'js/base.js'  // 打包的目录
    })
  ],
  devServer: {
    port: 8086
  }
};