介绍

打包工具，时行。

例子

https://github.com/xuya227939/blog/tree/master/examples/webpack/my-app

安装

$ sudo npm install -g create-react-app //全局安装的话，需要权限，所以使用sudo $ create-react-app my-app $ cd my-app $ npm install webpack //安装webpack包 $ npm install webpack-cli //脚本 $ npm install html-webpack-plugin //生成html插件 $ npm install extract-text-webpack-plugin@next //抽离css，ant的css代码体积非常大，这样抽离之后，减少了代码体积。 $ npm install babel-preset-es2015 //预先加载es6编译的相关模块，这个软件包已被弃用，但并不影响使用。 $ npm install babel-preset-react //编译react $ npm install babel-preset-stage-3 //这个看你想要支持什么语法了，就选择0-3的其中一种。 $ npm install babel-plugin-transform-class-properties //此插件转换es2015静态类属性以及使用es2016属性初始值设定项语法声明的属性。 $ npm install style-loader //将css插入页面 $ npm install file-loader //文件打包 $ npm install babel-loader //转化es6代码 $ npm install babel-polyfill //如果想使用 new Set()，Object.assign语法，就得用到它 $ npm install babel-plugin-import //支持import 引入插件 $ npm install webpack-dev-server //提供web服务

觉得麻烦？两条命令搞定

1.$ npm install webpack webpack-cli html-webpack-plugin babel-preset-es2015 babel-preset-react babel-preset-stage-3 babel-plugin-transform-class-properties style-loader file-loader babel-loader babel-polyfill babel-plugin-import webpack-dev-server

2. 这个得单独安装下，不能一起安装，因为这种 方式安装的版本是3.0.2与4.12.0

版本的webpack不兼容$ npm install extract-text-webpack-plugin@next$ npm install extract-text-webpack-plugin

使用

1.在根目录下，新建webpack.config.js文件并写入下面代码

const path = require('path'); const webpack = require('webpack'); const HtmlWebpackPlugin = require('html-webpack-plugin'); const ExtractTextPlugin = require("extract-text-webpack-plugin"); //引入对应插件 module.exports = {  devtool: 'source-map', //模式选择，这里选择原始代码，因为开发环境不需要去混淆代码。  mode: 'development', //环境区分，是开发环境development还是生产环境production  entry: ['babel-polyfill', './src/index.js'], //入口文件  output: {  filename: '[name].js', //输出文件  hashDigestLength: 7, //hash值设置  path: path.resolve(__dirname, 'build') //输出文件路径  },  module: {  rules: [  {  //匹配js或jsx文件进行编译转换  test: /\.js|jsx$/,  exclude: /(node_modules)/,  use: {  loader: 'babel-loader',  options: {  presets: ['react', 'es2015', 'babel-preset-env', 'stage-3'],  plugins: [["transform-class-properties"],["import",{ "libraryName": "antd", "libraryDirectory": "es", "style": "css" }]]  }  }  },  {  //匹配css文件，进行抽离css  test: /\.css$/,  use: ExtractTextPlugin.extract({  fallback: "style-loader",  use: "css-loader"  })  },  {  //匹配图片  test: /\.(png|svg|jpg|gif|jpeg)$/,  use: [  'file-loader'  ]  },  {  //匹配字体  test: /\.(woff|woff2|eot|ttf|otf)$/,  use: [  'file-loader'  ]  }  ]  },  plugins: [  //输出特定的html文件  new HtmlWebpackPlugin({  title: 'my-app',  template: 'public/index.html'  }),  //抽离的css文件名  new ExtractTextPlugin({  filename: '[name].css'  }),   new webpack.NamedModulesPlugin() //当开启 HMR 的时候使用该插件会显示模块的相对路径  ],  devServer: { //虚拟服务器  hot: false, //热模块更新作用。即修改或模块后，保存会自动更新 true开启，false关闭  historyApiFallback: true, //如果为 true ，页面出错不会弹出 404 页面  compress: true //如果为 true ，开启虚拟服务器时，为你的代码进行压缩。加快开发流程和优化的作用  } };

2.修改 public/index.html

把链接屏蔽

 -->

3.修改package.json

把scripts下的 替换为 "start": "react-scripts start","start": "webpack-dev-server --open --config webpack.config.js",

4.npm 开始

问题处理

• 如果提示这个错误找不到模块'webpack/bin/config-yargs'，可能是Webpack与webpack-dev-server版本不兼容导致，我是安装了 版本解决的。webpack版本是4.12.0$ npm install webpack-dev-server@3.1.3
  
• 特别要注意下这个插件extract-text-webpack-plugin， 这种方式安装的版本是3.0.2，与4.12.0版本的webpack不兼容，所以需要安装它的^4.0.0-beta.0版本。，即可。$ npm install extract-text-webpack-plugin$ npm install extract-text-webpack-plugin@next
  
• 在 “base” 中指定的未知插件 “import” 在 1，尝试相对于 如果遇到这个错，请确保你安装了 babel-plugin-import，如果没有，则安装下$ npm install babel-plugin-import
  
• 无法解码参数 '/%PUBLIC_URL%/favicon.ico' 如果报这个错的话，先把 public/index.html 页面的 Link屏蔽了。
  
• 模块构建失败（来自./node_modules/babel-loader/lib/index.js） 找不到模块 'babel-core' ，如果报这个错的话，则 重新安装下，再$ rm -rf node_modules/$ npm i$ npm start

想知道如何区分生产 or 开发环境？如何压缩js代码？如何打包代码发布吗？

https://github.com/xuya227939/ak47

欢迎在此issue下进行交流、学习

结语

webpack还是简单易学的。