webpack3.0 环境搭建

额、备份一下总是好的

#为了避免某些国外镜像源安装失败，先设置淘宝镜像代理
yarn config set registry https://registry.npm.taobao.org

# 初始化yarn
yarn init -y

# 添加webpack
yarn add webpack

# 添加webpack插件
yarn add html-webpack-plugin
yarn add webpack-dev-server
yarn add extract-text-webpack-plugin

# 添加webpack-loader
yarn add style-loader css-loader node-sass sass-loader 
yarn add url-loader
yarn add file-loader
yarn add postcss-loader autoprefixer

# 添加babel插件
yarn add babel-preset-react
yarn add babel-loader babel-core

# react相关
yarn add react react-dom
yarn add react-router react-router-dom
yarn add redux redux-thunk redux-saga react-redux
yarn add react-router-redux@next history

# 蚂蚁金服的UI框架：Ant Design
yarn add antd

# 添加第三方库
yarn add axios

配置webpack.config.js

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const ExtractTextPlugin = require('extract-text-webpack-plugin')
const autoprefixer = require('autoprefixer')

module.exports = {
    entry: {
        main: __dirname + '/src/main.js'
    },
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'assets/js/[name].js'
    },
    devtool: 'source-map',
    module: {
      rules: [
          { test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader' },
          {
              test: /\.woff(\?v=\d+\.\d+\.\d+)?$/,
              loader: 'url-loader',
              options: {
                  limit: 10000,
                  minetype: 'application/font-woff',
              },
          },
          {
              test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/,
              loader: 'url-loader',
              options: {
                  limit: 10000,
                  minetype: 'application/font-woff',
              },
          },
          {
              test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
              loader: 'url-loader',
              options: {
                  limit: 10000,
                  minetype: 'application/octet-stream',
              },
          },
          { test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
              loader: 'url-loader',
              options: {
                  limit: 10000,
                  minetype: 'application/vnd.ms-fontobject',
              },
          },
          {
              test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
              loader: 'url-loader',
              options: {
                  limit: 10000,
                  minetype: 'image/svg+xml',
              },
          },
          {
              test: /\.(png|jpg|jpeg|gif)(\?v=\d+\.\d+\.\d+)?$/i,
              loader: 'url-loader',
              options: {
                  limit: 10000,
              },
          },
          {
              test: /\.(scss|sass|css)$/,
              use: ExtractTextPlugin.extract({
                  fallback: 'style-loader',
                  use: [
                    { loader: 'css-loader' },
                    {
                      loader: 'postcss-loader',
                      options: {
                        sourceMap: true,
                        plugins: () => [autoprefixer({ browsers: ['iOS >= 7', 'Android >= 4.1'] })],
                      },
                    },
                    {
                       loader: 'sass-loader',
                       query: {
                         sourceMap: true
                       }
                    }
                  ]
              })
          }
      ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            title: 'my title',
            filename: __dirname + '/dist/index.html',
            template: __dirname + '/index.html',
            chunks: ['main']
        }),
        new ExtractTextPlugin('assets/css/[name].css')
    ],
    devServer: {
        contentBase: path.join(__dirname, 'dist'),
        compress: true,
        port: 9000
    }
}

配置.babelrc

{
  "presets": ["react"],
  "plugins": [
        ["import", { "libraryName": "antd", "style": "css" }]
  ]
}

配置package.json，加入scripts

{
  ...
  "scripts": {
    "build": "webpack",
    "dev": "webpack-dev-server"
  }
}