前端模块化和webpack打包

一、模块化

模块化是什么？

• 后端模块化操作即类与类之间的调用
• 前端模块化操作即js与js之间的调用

es5实现模块化操作

1. 新建01.js

   //创建js方法
   const sum = function(a,b){
       return parseInt(a)+parseInt(b)
   }
   
   const substract = function(a,b){
       return parseInt(a)-parseInt(b)
   }
   //设置哪些方法可以被其他js调用
   module.exports={
       sum,
       substract
   }
   
   

2. 新建02.js

   //引入01.js文件
   const m = require('./01.js')
   //调用
   console.log(m.sum(1,3))
   console.log(m.substract(10,3))
   

3. 使用node执行

   node 02.js
   

es6实现模块化操作一

1. 新建01.js

   //创建js方法
   export function getList(){
       console.log('getList success!');
   }
   

2. 新建02.js

   //引入01.js文件
   import {getList} from './01.js'
   //调用方法
   getList()
   

3. 利用babel将es6转换为es5，再执行

es6实现模块化操作二

1. 新建01.js

   //创建js方法
   export default{
       getList(){
           console.log('getList success!');
       },
       update(){
           console.log('update success!');
       },
   }
   

2. 新建02.js

   //引入01.js文件
   import m from './01.js'
   //调用方法
   m.getList()
   m.update()
   

3. 利用babel将es6转换为es5，再执行

二、Wepack打包

wepack是什么？

打包工具，可以把多个静态资源文件（js文件）打包成一个文件。

1. js打包

操作实例

1. 安装webpack工具

   npm install -g webpack 
   npm install -g webpack-cl
   

2. 创建js文件用于打包操作

   创建多个js文件，其中一个js引用其他的js方法

3. 创建webpack配置文件webpack.config.js，配置打包信息

   module.exports = {
       //告诉 webpack 入口文件
       entry:  __dirname + "/src/main.js",
       //打包后的文件输出到哪个目录，即打包后的文件存放目录
       output: {
           path: __dirname + "/dist",
           filename: "bundle.js"//打包后输出文件的文件名
       }
   }
   

4. 使用命令执行打包操作

   webpack #有黄色警告
   wepack --mode=development #没有警告
   

   或直接打包

   webpack src/main.js –o bundle.js
   

5. 导包测试

   <script src="dist/bundle.js"></script>
   

2.css打包

操作实例

1. 创建css文件style.css

   body{
       background-color: red;
   }
   

2. 在main.js引入css文件

   require('./style.css')
   

3. 安装css加载工具

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

4. 修改webpack配置文件

   module.exports = {
       //告诉 webpack 入口文件
       entry:  __dirname + "/src/main.js",
       //打包后的文件输出到哪个目录，即打包后的文件存放目录
       output: {
           path: __dirname + "/dist",
           filename: "bundle.js"//打包后输出文件的文件名
       },
   	module:{
   		rules:[
   			{
   				test: /\.css$/, //打包规则应用到以css结尾的文件上
   				use:['style-loader','css-loader']
   			}
   		]
   	}
   }
   

​ 5.打包测试同js