webpack安装使用

webpack是什么

前端资源加载打包工具

webpack能干吗

可以根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源，

可以减少页面请求静态文件的次数

webpack怎么用

1. 全局安装

   npm install -g webpack webpack-cli

2. 初始化项目

   npm init -y

3. src下创建common.js

   exports.info = function (str) {
    document.write(str);
   }

4. src下创建utils.js

   exports.add = function (a, b) {
    return a + b;
   }

5. src下创建main.js

   const common = require('./common');
   const utils = require('./utils');
   common.info('Hello World!' + utils.add(100, 200));

6. 新建配置文件webpack.config.js

   const path = require("path"); //Node.js内置模块
   module.exports = {
    entry: './src/main.js', //配置入口文件
    output: {
    path: path.resolve(__dirname, './dist'), //输出路径，__dirname：当前文件所在路
   径
    filename: 'bundle.js' //输出文件
    }
   }

7. 执行编译命令

   webpack #有黄色警告
   webpack --mode=development #没有警告
   #执行后查看bundle.js 里面包含了上面两个js文件的内容并惊醒了代码压缩

8. 也可以配置项目的npm运行命令，修改package.json文件添加一个dev 脚本命令

   "dev": "webpack --mode=development"

9. 运行npm命令执行打包

   npm run dev

10. 打包css文件

    安装style-loader和 css-loader

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

11. 修改webpack.config.js

    const path = require("path"); //Node.js内置模块
    module.exports = {
        entry: './src/main.js', //配置入口文件
        output: {
            path: path.resolve(__dirname, './dist'), //输出路径，__dirname：当前文件所在路径
            filename: 'bundle.js' //输出文件
        },
        //css打包配置
        module: {
            rules: [
                {
                    test: /\.css$/, //打包规则应用到以css结尾的文件上
                    use: ['style-loader', 'css-loader']
                }]
        }
    }

12. 创建style.css

    body{
     background:pink;
    }

13. main.js引入style.css

    require('./style.css');

14. 运行打包脚本命令

    npm run dev

15. 创建index.html访问查看得到