webpack傻瓜式搭建脚手架

webpack怎么搭建,你做过哪些配置项?

    从零用webpack搭建脚手架
    
1.  创建文件夹
2.  npm init -y  //初始化项目
3.  创建src      // 创建src文件夹 
4.  在src下创建 index.js
5.  创建public文件夹  创建index.html文件这是模板文件
6.  安装webpack   npm install  webpack webpack-cli  --save-dev
7.  全局再安装一下 npm i -g webpack webpack-cli
8.  在根目录下创建一个webpack.config.js文件 这是配置文件
9.  下载react 和 react-dom  npm install --save react react-dom
10. 下载 webpack   npm install  --save-dev  webpack-dev-server webpack-cli  webpack
11.  为了能够识别jsx文件需要下载babel-loader的插件 npm install --save-dev   @babel/preset-react babel-loader @babel/core @babel/preset-env
12.  为了能够识别scss需要下载 npm install --save-dev css-loader style-loader sass-loader node-sass
13.   设置挂载模板需要下载  npm install --save-dev copy-webpack-plugin"
14.   为了将public文件中copy到dist文件中需要下载  npm install --save-dev copy-webpack-plugin
15.   如果需要设置react的实验语法需要下载 npm install --save-dev  @babel/plugin-proposal-class-properties
    ```js
    const path = require('path')
    // html模板插件
    const HtmlWebpackPlugin = require('html-webpack-plugin')
    // 将public中的文件拷贝到dist中
    const CopyWebpackPlugin = require('copy-webpack-plugin')
    module.exports ={
        // 入口文件
        entry:'./src/index.js',
    
        output:{
            // 出口文件
            path: path.resolve(__dirname,'./dist'),
            // 出口文件的名字
            filename:'main.js'
        },
        module:{
            // 规则
            rules:[{
                // // 配置转换规则
                // test:/\.(js|jsx)$/,
                // use:'babel-loader',
                // // 禁止转换
                // exclude:[path.resolve(__dirname,'./node_modules')]
                test: /\.(js|jsx)$/,
                use: "babel-loader",
                exclude: [path.resolve(__dirname, "./node_modules")]
            }]
        },
        plugins:[
            new HtmlWebpackPlugin({
                template:path.resolve(__dirname,'./public/index.html')
            }),
            new CopyWebpackPlugin()
        ],
        devServer:{
            //从这个位置启动服务
            contentBase:path.resolve(__dirname,'./dist'),
            stats: "errors-only"
        }
    
    
    }
    ```
    
```js

 rules:[{//引入css文件打包先执行css-loader解析成能打包的文件
    test:/\.css$/,
    use:['style-loader','css-loader',{
        //为css做兼容
        loader:'postcss-loader',
        options:{
            plugin:[
                require('autoprefixer')("last 100 versions")
            ]
        }
    }]
},{
    test:/\.(png|jpg|jpeg|gif)$/,
    use:[{//将图片打包引进
        loader: 'file-loader',//将图片打包
        options: {//小于limit值的就要变成baes64图片
            limit:1
        }
    }]
}]
```