webpack入门一

• 1、首先新建一个文件夹，使用cmd打开命令符，进行初始化

npm init -y 只有初始化了，才能使用npm 下载其他的插件

• 2、下载webpack和webpack-cli(推荐使用局部下载)

npm install webpack@4.43.0 webpack-cli@3.3.12 -D 这里只在本地使用所以-D，由于目前最新版本是5.x，我们使用4.x进行使用（内置一个0配置，默认配置好了一些）

• 3、新建一个src文件夹，在下面在新建一个index.js文件，在里面先写一些东西

• src/index.js

let a = '11111';
console.log('sadada');

• 4、我们可以输入指令在终端上进行简单的一个打包了

npx webpack

image.png

• 黄色警告中的mode需要我们进行设置下，默认是生产环境，所以你打开打包后的文件都是没有注释等的

• 此时我们可以看到有个dist文件下面有个main.js文件，为什么我们什么也没有进行配置，就会自动的给我们生成了一个dist文件还有main.js呢？因为webpack4.x中有一个0配置，给我们配置了这些，如果我们想要修改的话，也是可以的，那么继续往下看吧！！！

• 5、好了下面我们开始正式的学习吧

• 打开package.json，可以自己配置一个打包的指令

"scripts": {
"test": "echo "Error: no test specified" && exit 1",
"build":"webpack"
}

• 使用npm run build 和 npx webpack 都可以进行打包

• 接下来我们在根目录下新建一个webpack.config.js文件，这是默认修改webpack的文件，当然你想自己定义一个修改webpack配置的文件名也是可以的，那先看看怎么自定义配置webpack的文件名吧 ？

• 1、在根目录新建kfc.config.js

    const path = require('path');
    module.exports = {
        // entry:'./src/index.js',//入口文件（单文件入口）
        entry:{//todo 多文件入口
            index:'./src/index.js',
            // main:'./src/main.js'
        },
        output:{
            path:path.resolve(__dirname,'./build'),//todo 打包后存放的文件名
            filename:'[name].js'//todo 打包后的文件名,单文件'build.js'直接写，多文件[name],入口文件名是啥，打包后还是啥
        },
        //todo 当前的模式，none 不做任何的处理 development开发环境做了相应的处理，方便调试，production生产环境会启动相应的插件
        mode:'development',
    }

• 2、在package.json的打包指令中进行添加参数

"scripts": {
"test": "echo "Error: no test specified" && exit 1",

"build":"webpack --config ./kfc.config.js"

},

• 使用npm run build 或者是npx webpack --config ./kfc.config.js，这个时候，你可以再看看你打包完的文件
• 在src下新建一个index.html，通过HtmlWebpackPlugin这个插件，可以将index.html进行复制，打包后会将打包的js文件等自动的引入

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

   const path = require('path');
    //todo 通过HtmlWebpackPlugin这个插件，可以将index.html进行复制，打包后会将打包的js文件等自动的引入
    const HtmlWebpackPlugin = require('html-webpack-plugin');
    module.exports = {
        // entry:'./src/index.js',//入口文件（单文件入口）
        entry:{//todo 多文件入口
            index:'./src/index.js',
            // main:'./src/main.js'
        },
        output:{
            path:path.resolve(__dirname,'./build'),//todo 打包后存放的文件名
            filename:'[name].js'//todo 打包后的文件名,单文件'build.js'直接写，多文件[name],入口文件名是啥，打包后还是啥
        },
        //todo 当前的模式，none 不做任何的处理 development开发环境做了相应的处理，方便调试，production生产环境会启动相应的插件
        mode:'development',
        module:{//todo 模块，一般可以将我们的scss,less,.vue等进行loader解析，在输出
            rules:[//todo 规则
                {
                    test:/\.css$/,//todo .css结尾的文件进行解析
                    use:['style-loader','css-loader']//todo 自后往前的顺序，不能写错了，还可以单独的配置loader
                },
                {//todo 每个模块都是独立的
                    test:/\.scss$/,
                    use:[
                        {
                            loader:'style-loader',
                            options:{/**可以进行配置 */}
                        },
                        "css-loader","sass-loader"
                    ]
                }
            ]
        },
        plugins:[//todo 不同的插件，可以帮助我们处理不同的事
            new HtmlWebpackPlugin({
                template:'./src/index.html'
            })
        ]
    }

• 插件和loader这些我们可以打开webpack官网去查查，使用适合你自己的插件哟

＞　注意：html-webpack-plugin这个版本现在是５.ｘ，打包的时候要是报错的话，可以降低下版本试试，４.５.２试试这个版本