React的Webpack配置

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
  }
};

推荐阅读更多精彩内容

  • 无意中看到zhangwnag大佬分享的webpack教程感觉受益匪浅,特此分享以备自己日后查看,也希望更多的人看到...
    小小字符阅读 4,924评论 6 30
  • 版权声明:本文为博主原创文章,未经博主允许不得转载。 webpack介绍和使用 一、webpack介绍 1、由来 ...
    it筱竹阅读 3,862评论 2 16
  • GitChat技术杂谈 前言 本文较长,为了节省你的阅读时间,在文前列写作思路如下: 什么是 webpack,它要...
    萧玄辞阅读 8,475评论 10 105
  • 前言 搭一个脚手架真不是一件容易的事,之前为了学习webpack是怎么配置的选择自己搭建开发环境,折腾了好几天总算...
    大柚子08阅读 13,420评论 29 34
  • 写在开头 先说说为什么要写这篇文章, 最初的原因是组里的小朋友们看了webpack文档后, 表情都是这样的: (摘...
    Lefter阅读 2,662评论 2 30