webpack打包攻略（细的不能再细了）

<!-- 话不多说 直接开搞 -->

<!-- webpack打包 -->
1.桌面建一个webpack.demo(名字随便起);
2.里面在建一个项目(例如光线外卖gxwm)文件夹;
3.项目文件夹同级 cmd 输入 cnpm i -D -g  webpack webpack-cli  <!-- -g为全局 -->
4.创建一个src文件夹
5.src同级建一个webpack.config.js
里面写 module.exports={
    模式 mode: 'development',
    入口 entry:'./src/index.js',
}
4.1 src文件夹下 创建一个index.js文件
      console.log(xxx);
6.然后在文件地址栏输入 cmd 打开后输入 cd gxwm （以下统称终端） （cd..为上一级 cd文件名到指定文件名下）
7.在输入 webpack 就会出现一个dist文件夹 下面有一个main.js 他就是打包后的数据 基本就算打包完成了

<!-- 打包css -->
8.在src下建一个css文件夹
文件夹里建css文件，里面写入
body{
    width: 100%;
    height: 1000px;
    background-color: pink;
}
9. index.js文件里引入css文件
import'./css/index.css'
10. 在终端里下载npm i -D css-loader style-loader 
（如果多个项目要用则去webpack.demo cd..即可 再次返回到cd gxwm）
11.再次在webpack.config.js里写入
module: {
    rules: [
        {
            test: /\.css$/i,
            use: ['style-loader', 'css-loader']
        }
    ]
}
webpack.config.js内容全部展示如下
module.exports={
         mode: 'development',
         entry:'./src/index.js',
        module: {
            rules: [
                {
                    test: /\.css$/i,
                    use: ['style-loader', 'css-loader']
                },
            ]
        }
         
}
12. 在终端 gxwm 输入 webpack 
13. 在gxwm 上新建一个html文件 引入main.js 如下一样
<script src="dist/main.js" type="text/javascript" charset="utf-8"></script>
打开html 出现粉色背景则成功
<!-- 打包less -->
14.在css文件夹里新建一个demo.less文件 输入如下
@h:500px;
@bgc:green;
div{
    height: @h;
    width: @h;
    background-color: @bgc;
}
会生成一个demo.css的文件 干掉他 没错就是删掉他
15. 然后在index.js中引入import'./css/index-2.less'
16.然后去配置webpack 输入如下：
                {
                    test: /\.less$/i,
                    use: ['style-loader', 'css-loader', 'less-loader']
                }
最后展示如下
module.exports={
         mode: 'development',
         
         entry:'./src/index.js',
        module: {
            rules: [
                {
                    test: /\.css$/i,
                    use: ['style-loader', 'css-loader']
                },
                {
                    test: /\.less$/i,
                    use: ['style-loader', 'css-loader', 'less-loader']
                }
            ]
        },
}
17.去终端webpack.demo下载npm i -D less less-loader
18.去终端yyds输入webpack
19.在html文件body里创建<div></div>打开即可

后续后两天再整理

<!-- 具体可参照webpack官网 https://webpack.docschina.org/
或者下载我上传md的资源 免费哦
也可以找我要解说视频 -->