Webpack（二）超详细使用方法（不看后悔）

​

 

 2.使用案例

        1.创建目录

        

​

          2.示例代码

                

​

​

​

       如如所示，写了一个求和函数并抛出，在index.js里引入+传参+控制台打印，并且在html里调用了js,正常情况打印结果是4，打开看看

​

                                                （不能在模块外使用import语句）

这个时候可以翻到上面2.1讲的模块化开发，下面用webpack解决

3.下包

        

npm init -y
npm install webpack webpack-cli --save-dev

4.上操作

1.在package.json里添加一个脚本

​

2.在终端启动

​

3. 可以看到生成了dist文件夹,这就是打包好的文件夹

​

4.在html里引入main.js

​

5. 控制台打开

​

以上就是最基本的打包，想一下，再加入css会怎么样？

        6.创建css+引入到index.js+html创建box盒子

---

​

​

​

  7.执行打包

（翻译：您可能需要一个适当的加载器来处理此文件类型，目前没有配置加载器来处理该文件）

5.配置loader        

        1.根目录创建

        2.加入示例代码

const path = require('path');

module.exports = {
    // 入口文件
  entry: './src/index.js',
    // 出口文件
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'dist'),
  },
};
 

       3.配置loader

        下包  

npm install --save-dev css-loader
npm install --save-dev style-loader
 

        配置loader+添加模式mode示例代码

const path = require('path');

module.exports = {
    // 入口文件
    entry: './src/index.js',
    // 出口文件
    output: {
        filename: 'main.js',
        path: path.resolve(__dirname, 'dist'),
    },
    // 模式
    mode: "development",
    //   loader
    module: {
        rules: [
            {
                test: /.css$/i,
                use: ['style-loader', 'css-loader'],
            },
        ],
    },
};
 

        修改build命令

        

        终端启动成功

        页面看效果

        

6.配置plugin

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

终端打包

咱俩可真厉害，能看到这里，听说主页有火柴能点着的干货！！，“真的嘛博主？” 那我就收藏+关注了