第三章

模块开发

 

一． 了解模块开发

 

1、当一个js中使用另外一个js的方法或者属性时，用到了模块化的导出与导入  

（1）、comminjs的导出module.exports={传出的名称：要传出的属性名称或者方名称}
（2）、comminjs的导入 var {导入的属性名称或者方法名称}=require（‘./了解模块化01.js’）

 

 

二． ES6的模块开发

 

1、第一种导入导出

（1）、export导出属性或者方法，（必须是一行）例子：export{flag,sum}
（2）、import{flag,sum} from "./JavaScript01.js":导入

 

 

2、第二种导入导出

 

（1）、export default导出属性或者方法，（必须是一行）例子：export default ajh
（2）、import  aaaa from "./JavaScript01.js":导入
 (第二种默认导入导出只能设置一次)

 

 

三． webpack安装（打开运行输入cmd）

 

1、 安装webpack首先安装Node.js，Node.js自带了软件包管理工具npm

 

2、 查看自己的node版本：node -v（如果node不是有效命令说明未成功，进入https://blog.csdn.net/weixin_39477597/article/details/87784418网站对应说明下载）

 

3、 全局安装webpack（这里我指定版本号3.6.0，因为vue cli2依赖该版本）：npm install webpack@3.6.0 -g（注意：安装完成后，重新进入命令界面输入webpack -v看下是否成功，如果提示webpack不是有效命令说明未成功！！！）

 

4、 局部安装webpack（后续才需要）：--save-dev是开发的依赖，项目打包后不需要继续使用的

5、安装指定版本的webpack：npm install --save-dev webpack@3.6.0（# 不要忘记webpack4.+开始webpack-cli是必备的哦）

 

5、 删除webpack：https://www.jianshu.com/p/119a825d8bba

（1）、删除全局webpack-cli：npm uninstall -g webpack-cli 

（2）、删除本地（局部）webpack-cli：npm uninstall webpack-cli

（2）、删除全局webpack：npm uninstall -g webpack

 

 

 

（2）、删除本地（局部）webpack：npm un webpack

 

 

 

 

 

 

 src是开发的js文件夹，dist是用webpack发布的js文件夹，页面调用时调用dist文件夹中的js，用命令：webpack ./src/main.js ./dist/qq.js意思是 用webpack把src中的main.js发布成dist中的qq.js

 

1、 更具有智能化，只写一个webpack时，就会自动编译好js文件（推荐使用）：

 

（1）：其次在html的同一级创建名字叫webpack.config的js文件

 

（2）：当webpack.config.js配置好是用webpack命令直接执行会更方便！！！！

const path = require('path')
module.exports = {    
    entry: './src/main.js',//要编译的js文件   
    output: {
             path: path.resolve(__dirname, 'dist'),//编译好的路径__dirname找到当前坐在的位置

             filename:'bundle.js'//编译好的名称 
   }，
}

 

如果报这个错误时，将webpack.dev.config.js中的_dirname 改为 __dirname 注意这里是两个下划线谢谢！

（3）：首先在命令界面cd …找到html页面的上一级文件夹,然后用npm init 把  package.json创建出来。

（4）：在package.json文件中添加"build"："webpack"字节，命令界面cd …找到html页面的上一级文件夹, 用命令npm run build把需要编译的js创建出来，

局部安装时npm install webpack@3.6.0 --save-dev安装成功后package.json会加入

 

 

 

 

 

当有css文件时要在接收模块开发的js中加入require('./css/abc.css')使得调用css文件，

添加成功后在webpack.config.js文件中加入

module.exports = {
 entry: './src/main.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename:'bundle.js'
    },

    module: {
        rules: [
            {
                test: /\.css$/,
               use: ['style-loader','css-loader' ]
            }
        ]
    }
}

 

在module.exports中添加module字节，添加相应的loader配置，下面是loader文档文档连接https://www.webpackjs.com/loaders/，完成后，添加相应的loader命令，（这里添加的是style-loader和css-loader）

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

当webpack安装style-loader或者css-loader时报与webpack版本冲突的问题

解决问题的链接：https://blog.csdn.net/Xidian2850/article/details/103617081