webpack 学习

extract-text-webpack-plugin 分离scss文件

cnpm i extract-text-webpack-plugin -D

const ExtractTextWebpackPlugin=require('extract-text-webpack-plugin')

module.exports={
	//some codes 
	module:{
		rules:[
			{
				test:/\.scss$/,
				exclude:/node_modules/,
				use:ExtractTextWebpackPlugin.extract({
					fallback:'style-loader',
					use:['css-loader','sass-loader']
				})
			}
		]
	}，
	plugins:[
		new ExtractTextWebpackPlugin("css/[name].css")
	]
}

让项目启用实验语法

如 export from
安装
yarn add @babel/plugin-proposal-export-default-from -D

在webpack配置中使用

module:{
	rules:[
			{
              test: /\.(js|mjs|jsx|ts|tsx)$/,
              loader: require.resolve('babel-loader'),
              options: {
                plugins: [
                  [
                    ....somecode
                  ],
                  ["@babel/plugin-proposal-export-default-from"]
                ],
              },
            },
	]
}

create-react-app未eject时

react-app-rewired 是react 社区开源的一个修改 CRA 配置的工具。
根目录创建 config-overrides.js可以覆盖配置webpack

const { override, fixBabelImports ,addWebpackAlias} = require('customize-cra');
const path = require('path')
module.exports = override(
   fixBabelImports('import', {
    libraryName: 'antd',
     libraryDirectory: 'es',
     style: 'css',
   }),addWebpackAlias({
    // [路径名称]: 磁盘路径
    ['@']: path.join( __dirname, 'src' ),
    ['views']: path.join( __dirname, 'src/views' ),
    ['components']: path.join( __dirname, 'src/components' ),
    ['lib']: path.join( __dirname, 'src/lib' ),
    ['store']: path.join( __dirname, 'src/store' ),
    ['assets']: path.join( __dirname, 'src/assets' ),
    ['utils']: path.join( __dirname, 'src/utils' ),
    ['mock']: path.join( __dirname, 'src/mock' )
  })
 );

devserver proxy

module.exports = {
  //...
  devServer: {
    proxy: {
      '/maoyan': {
        target: 'http://m.maoyan.com',
        changeOrigin: true,
        pathRewrite: {
          '^/maoyan': ''
        }
      }
    }
  }
}

在create-react-app中使用反向代理proxy

1. $ yarn add http-proxy-middleware
2. 在src下创建一个 setupProxy.js
3. 在这个文件中使用 http-proxy-middleware

  const proxy = require( 'http-proxy-middleware' )
  module.exports = function ( app ) {
    // app.use( 反向代理标识，配置项)
    // https://api.douban.com/v2/movie/in_theaters
    // https://www.duitang.com/napi/index/hot/?
    app.use( proxy('/duita', {
      target: 'https://www.duitang.com',
      changeOrigin: true,
      pathRewrite: {
        '^/duita': ''
      }
    }))
  }