webpack-js篇

webpack自带打包js的机制，不需要配置

webpack 4.32.2

webpack v1.x 2014.02
webpack v2.x 2017.01
webpack v3.x 2017.06
webpack v4.x 4.32.2 2018 05
webpack v5.x 目前不是稳定的版本.

npm info webpack 可以下载的版本， webpack 5.x-bate (公测的版本)。

卸载旧的webpack版本 npm uninstall webpack -g
下载最新的版本 npm install webpack -g
检擦当前webpack 版本 webpack --version

需要在本地文件内下载webpack，初始化package.json文件
去下载webpack 和webpack-cli, 3.x的版本是不需要下载webpack-cli,webpack集成了webpack-cli, 4.x以上的版本没有集成，需要手动下载.
webpack 4.x以下的使用webpack app.js bundle.js ---ok
4.x以上没用了，因为4.x增加了一个多入口命令打包webpack app.js app1.js -o bundle.js

如果不加入 --mode “development” 参数则默认是生产环境，会自动压缩代码

webpack app.js app1.js -o bundle.js --mode "development"

• 入口
  命令行中写入口，配置文件webpack.config.js中写

  module.exports = {    
      mode:"development",    
      //入口    
      // entry:"./app.js",    
      // entry:["./app.js",'./app1.js'],
      // entry:{    
      //     "main":"./app.js",    
      //     "app1":"app1.js"    
      // },        
      entry:{        
      	"app":"./app.js"    
      },
      //出口配置    
      output:{        
      	filename:"[name].js"    
      }
  }

  此时运行webpack命令会自动在根目录下生成一个dist文件，打包好的代码文件都将放入dist文件夹。
• 出口
• module js ts sass stylus less 图片.w文件，
• plugins

webpack将 es6+转换成es5语法（兼容低版本IE）

使用babel，需要下载babel-loader、@babel/core、@babel/preset-env --save-dev
babel-loader 将es6或者更高版本内置的js语法转成浏览器识别的js版本。
点击查看文档
在webpack.config.js中配置,代码如下：

但是,如果我们想要使用Object.assign()这样的高级语法，还需要配置垫片库（polyfill），垫片库实现了es6高阶的语法。执行下面的代码下载：

npm install -D @babel/polyfill

此时会将所有的高阶语法实现都会被打包，所以我们可以配置按需加载。（注意：如果不配置按需加载直接打包需要在具体模块中导入@babel/polyfill）。按需加载的配置代码如下：

配置targets属性可以使指定的浏览器版本使用垫片打包，若是所设置的浏览器版本可以识别es6+版本的js语法则不会使用垫片打包。targets属性配置如下：

polyfill 是全局垫片，会将我们使用的方法放到原型链上。打包插件的时候使用全局垫片可能会引起冲突。所以我们会用到局部垫片，下载代码如下：

npm install --save-dev @babel/plugin-transform-runtime
npm install --save @babel/runtime

点击查看文档

关于babel-loader的配置可以单独提取出来，新建一个.babelrc文件，将options的内容剪切出来，放入.babelrc文件。局部垫片的配置如下图所示：

当配置好局部垫片再次打包时会遇到如下错误：

根据错误提示运行如下代码：

 npm install -D @babel/runtime-corejs2

当开发组件库的时候可以用局部垫片，当开发项目的时候可以用全局垫片。
再次执行打包命令，就可以正常打包了！

webpack-修改打包代码的路径

//webpack.config.js
var path = require("path");
//然后修改打包的出口配置
output:{
	filename:"[name].js",
	path:path.resolve(__dirname,'js/')
	//path:path.resolve(__dirname,'dist/') 默认打包到dist目录下。
}