webpack-React

webpack-react小书学习总结和踩过的坑

webpack config

--config filename   //webpack执行某个配置文件
--colors            //彩色字
--progress          //进度
--display-modules   //打包的模块
--display-reasons   //打包的原因
--watch             //webpack监听文件有修改后自动重新打包
--port 8888         //设置启动端口
--open              //启动后自动打开浏览器

loader

module: {
    /*
    配置各种类型文件的加载器, 称之为loader
    webpack当遇到import ... 时, 会调用这里配置的loader对引用的文件进行编译
    */
    rules: [
      {
        /*
        使用babel编译ES6/ES7/ES8为ES5代码
        使用正则表达式匹配后缀名为.js的文件
        */
        test: /\.js$/,

        // 排除node_modules目录下的文件, npm安装的包不需要编译
        exclude: /node_modules/,

        /*
        use指定该文件的loader, 值可以是字符串或者数组.
        这里先使用eslint-loader处理, 返回的结果交给babel-loader处理. loader的处理顺序是从最后一个到第一个.
        eslint-loader用来检查代码, 如果有错误, 编译的时候会报错.
        babel-loader用来编译js文件.
        */
        use: ['babel-loader', 'eslint-loader']
      },

      {
        // 匹配.html文件
        test: /\.html$/,
        /*
        使用html-loader, 将html内容存为js字符串, 比如当遇到
        import htmlString from './template.html'
        template.html的文件内容会被转成一个js字符串, 合并到js文件里.
        */
        use: 'html-loader'
      },

      {
        // 匹配.css文件
        test: /\.css$/,

        /*
        先使用css-loader处理, 返回的结果交给style-loader处理.
        css-loader将css内容存为js字符串, 并且会把background, @font-face等引用的图片,
        字体文件交给指定的loader打包, 类似上面的html-loader, 用什么loader同样在loaders对象中定义, 等会下面就会看到.
        */
        use: ['style-loader', 'css-loader']
      },

      {
        /*
        匹配各种格式的图片和字体文件
        上面html-loader会把html中<img>标签的图片解析出来, 文件名匹配到这里的test的正则表达式,
        css-loader引用的图片和字体同样会匹配到这里的test条件
        */
        test: /\.(png|jpg|jpeg|gif|eot|ttf|woff|woff2|svg|svgz)(\?.+)?$/,

        /*
        使用url-loader, 它接受一个limit参数, 单位为字节(byte)

        当文件体积小于limit时, url-loader把文件转为Data URI的格式内联到引用的地方
        当文件大于limit时, url-loader会调用file-loader, 把文件储存到输出目录, 并把引用的文件路径改写成输出后的路径

        比如 views/foo/index.html中
        <img src="smallpic.png">
        会被编译成
        <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAA...">

        而
        <img src="largepic.png">
        会被编译成
        <img src="/f78661bef717cf2cc2c2e5158f196384.png">
        */
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 10000
            }
          }
        ]
      }
    ]
  },

1、css-loader

npm install css-loader style-loader --save-dev

css-loader会遍历 CSS 文件，然后找到 url() 表达式然后处理他们，style-loader 会把原来的 CSS 代码插入页面中的一个 style 标签中。

多文件入口

module.exports = {
    entry: {
      app: './src/index.js',
      print: './src/print.js'
    },
    output: {
      filename: '[name].bundle.js', 
      //[name]占位符，动态生成文件名
      filename: 'js/[name].bundle.js',
      //js文件都会打包到 dist/js目录下
      path: path.resolve(__dirname, 'dist')
    }
  };

HtmlWebpackPlugin

npm install --save-dev html-webpack-plugin

const HtmlWebpackPlugin = require('html-webpack-plugin');
plugins: [
  new HtmlWebpackPlugin({
    title: 'Output Management', //页面title
    filename: 'admin.html',     //html的文件名
    filename: 'html/admin.html',//打包至html文件夹下
    inject: true | 'head' | 'body' | false //<scrip></scrip>标签插入的位置
  })
],

Cleaning up the /dist folder

npm install clean-webpack-plugin --save-dev

const CleanWbpackPlugin = require('clean-webpack-plugin')

plugins: [
  new CleanWbpackPlugin(['dist']), //打包时清空dist目录
]

Using source maps

module.exports = {
    devtool: 'inline-source-map',
    //开发环境正确指出哪行出错
}

Using webpack-dev-server

npm install --save-dev webpack-dev-server

//  package.js
"start": "webpack-dev-server --open"
// webpack.config.js
devServer: {
    contentBase: './dist'
},

Hot Module Replacement（HMR）

webpack.config.js

const webpack = require('webpack')
module.exports = {
    devServer:{
        hot: true
    },
    plugins: [
        new webpack.HotModuleReplacementPlugin()
    ]
}

CLI

webpack-dev-server --hotOnly

编译react

    Module build failed: SyntaxError: react/hello.jsx: Unexpected token (5:11)
  3 | export default class Hello extends React.Component {
  4 |   render() {
> 5 |     return <h1>Hello world</h1>;
    |            ^
  6 |   }
  7 | }

1创建.babelrc文件

npm install babel-preset-react babel-preset-es2015 babel-preset-stage-0 --save-dev

{
"presets": [
  "es2015"
],
"plugins": [
    ["transform-react-jsx"]
  ]
}

2 安装react-dom(react15)

npm install react-dom --save-dev

import ReactDOM from 'react-dom';
ReactDOM.render(<Hello />, document.getElementById('app'));
React.render(<Hello />, document.getElementById('app'));//react15后不能这样写