vuejs学习3.2 webpack基本使用——对js的打包

webpack起步

dist文件夹保存打包的文件，src存放源文件
src中三个js文件使用模块化，想在index文件中调用，如果直接使用
< script src="./src/main.js"></ script>由于浏览器不能识别commonJs代码，所以不能运行成功

可以通过webpack对文件打包成浏览器能够识别的文件，执行如下:
终端Terminal通过cd进入指定文件夹（cd 文件名表示进入文件，cd …表示退到上一层文件），然后进行打包

webpack ./src/main.js  ./dist/bundle.js

如果看到如下没有报错，表示成功

在dist文件夹中出现打包好的js文件bundle.js文件
然后index可以直接调用< script src="./dist/bundle.js"></ script>则能运行成功

webpack能够处理文件之间的依赖，所以只需要打包main.js文件即可

webpack配置

由于手动使用webpack ./src/main.js ./dist/bundle.js命令过于复杂，可以通过webpack配置来实现，直接输入webpack就可以进行打包
1，首先创建webpack.config.js（目前固定名字）来进行webpack的配置

//node语法，path是node包文件的
path = require("path");
//映射入口和出口
module.exports = {
  //对应的入口:可以是字符串/数组/对象,我们这里只有一个入口，所以写一个字符串即可
  entry:"./src/main.js",
  //对应的出口：通常是一个对象，里面至少包含两个重要属性，path和filename
  output:{
    //路径——————必须是一个绝对路径
    path:path.resolve(__dirname,'dist'),
    //文件名
    filename:"bundle.js",
  },
}

需要使用module.exports来设置对应入口和出口，但是出口必须包含路径和文件名，而路径必须是绝对路径，可以直接复制绝对路径，但是文件位置改变，路径也改变，所以可以使用node语法，通过node的包来获取绝对路径，
2，所以，在终端执行

npm init

填写对应信息，大部分可以不填直接回车，执行完成后出现package.json文件，需要node的依赖，一定要建立一个package.json文件

path是一个模块，里面有一个函数resolve，resolve对两个路径进行拼接
path.resolve(__dirname,‘dist’)：_dirname（两条）是一个node定义的全局变量表示webpack.config,js的路径

结果：

但是一般不会使用webpack，一般使用npm run build来进行打包
可以在package.json中配置脚本：

配置脚本后可以直接终端运行npm run build进行打包，配置脚本时，优先找本地的webpack，只有找不到本地时才会使用全局webpack，由于各机器的webpack版本可能不同，在开发时可能由于版本问题导致出错，所以一般在项目中创建一个本地的webpack
在对应文件路径终端运行如下：

npm install webpack@3.6.0 --save-dev
"devDependencies": {
    "webpack": "^3.6.0"
  }

运行完成功后：
package.json中出现如下：表示开发时依赖

"devDependencies": {
    "webpack": "^3.6.0"
  }