webpack使用

前端项目使用模块化时，如果不整合成一个文件，那么每当遇到一个模块就要请求一次，耗性能，如果打包成一个文件，那就只需要请求一次就够了。

webpack是在npm上的，npm属于node，所以要有nodejs环境。先初始化项目。

1  npm init生成package.json文件。

2  安装依赖：webpack（核心代码）webpack cli（命令行工具）

-D 这是开发时要用的，运行时不用。所以是devDepencies

3 在src编写代码。index.js,m1.js,m2.js。在index.js引入模块1，模块2

4 执行npm webpack打包成dist文件。或者在package.json中设置自定义命令  script：{"build"："webpack"}，接着npm build进行打包。

src里面的，都是前端代码，遵循Es6规范。当你导出东西的时候，一般都用export default{

}

但是webpack的配置文件，webpack.config.js是运行在node上的，所以要遵循node规范，导出时用module.exports＝{

}

5  webpack默认只能打包js，如果想要打包其他的东西，例如css，需要下载css-loader。处理less，就要下载less-loader。只要是处理特殊的文件，就要引入新的loader。

module对象：{

     rules数组：[{

          //具体的loader

         text：/\.css＄/,  //css文件

         loader：[“style-loader”，“css-loader”]

      },

     //其他loader

       {

       }

    ]

}

export default{

        module：{

        }

}

使用bable，将es6的语法转成es5.

下载 npm install -D babel-loader(将babel与webpack关联) @babel core（转移代码） @babel/preset-env(转换常用的插件)

 

6 开发服务器

npm install -D webpack-dev-server

运行

npm webpack serve