react-webpack基本配置（2）

2020-03-07

字数统计: 441字 | 阅读时长≈ 2分

css预处理和autoprefixer

npm i less-loader less –save-dev 打包.less

npm i postcss-loader autoprefixer -D 为了打包的css加前缀

webpack.config.js里module部分修改为

module: {
    rules: [
        {
            test:/\.css$/,
            use: [
                MiniCssExtractPlugin.loader,
                'css-loader',
                'postcss-loader'                  //后写的先执行,postcssloader一定要写在后面
            ],
            exclude: /node_modules/
        },
        {
            test:/\.less$/,
            use: [
                MiniCssExtractPlugin.loader,
                'css-loader',
                'postcss-loader' ,
                {
                    loader:'less-loader',
                    options:{
                        
                    } 
                }                   //和上面对比两种写法
            ],
            exclude: /node_modules/
        },
    ],
},

创建postcss.config.js给css加前缀

module.exports = {

  plugins:[

    require('autoprefixer')

  ]

}

在package.json里加入

1
2
3

"browserslist": [
  "cover 99.5%"
]

处理图片资源

新建src/assets，放一张照片gundum.jpg。直接编译发现出错

npm i file-loader –save-dev

npm install url-loader –save-dev url-loader包涵file-loader

在module的rules里添加

{
                test: /\.(png|jpe?g|gif)$/i,
                use: [
                        {
                        loader: 'url-loader',
                        options: {
                            limit: 512,                 //小于512则放到css里，大于512以图片
                            name: 'images/[name].[ext]',
                            publicPath: '/'
                        },
                    },
                ],
            }

处理静态资源-copy

npm install copy-webpack-plugin –save-dev

在webpack.config.js里的plugins里添加

new CopyPlugin([

      { from: path.resolve(process.cwd(),'src/static/'), 

       to: path.resolve(process.cwd(),'dist/static/') },

     ]),

添加babel

npm install -D babel-loader @babel/core @babel/preset-env

在module的rules里添加

{
                test: /\.m?js$/,
                exclude: /(node_modules|bower_components)/,
                use: {
                  loader: 'babel-loader',
                  options: {
                    presets: [
                        '@babel/preset-env'
                    		 ]
                  		   }
                    }
}

此处要挖一个node的坑

可以建立一个test.js

export const add = (x,y) => {
    console.log(x + y)
    console.log(`${x} + ${y} = ${x + y}`)     //这里一定要用tab上面的反引号。
}

并且在index.js中引用test.js里的add

1 2	import {add} from './test' add(1,2)

测试完成后，复制一份webpack.config.js，分为dev和prod版本，同时修改package.json里的scripts里的路径。

这样做的目的是因为在dev版本里不需要css等静态资源的压缩。

本文作者： Raphael_Li
本文链接： https://lifei-2019.github.io/react2/
版权声明： 本博客所有文章除特别声明外，均采用 Apache License 2.0 许可协议。转载请注明出处！