一步步学习webpack 1

webpack-cli 依赖 webpack4.x.x
webpack 的安装webpack-cli 必须是全局的，不然运行webpack 命令时会提示安装webpack-cli,但是提示的是-d模式，即使安装了再次运行webpack还是会提示你安装webpack-cli；
配置文件 mode： development|production 表示编译模式
output 的path 值必须是 绝对路径，使用path.resolve(__dirname)+想要的路径即可，__dirname 是当前文件的路径，path.resolve是用来构建绝对路径的
在某个目录下执行webpack 就是默认 使用webpack.config.js 中的配置 调用webpack,也可以直接使用webpack api来调用
webpack.config.js 
const path = require("path");
module.exports = {
entry:"./src/main.js",
output:{
	filename:"[name].js",
	path:path.resolve(__dirname, 'dist')

},
mode:"production"



}
package.json中 script可以加入
"start":"webpack webpack.config.js"
运行 npm  start 即可。其他的脚本需要使用 npm run xx

 

node 目前不支持 import语法，但webpack打包的文件支持import，也支持import某个文件中的 单独的一项（但实际上整个文件都会先执行一遍，而且js文件也会全部引入）
单纯使用 webpack 编译出来的js会将当前模块没有使用的变量和方法删除， dev js的结构是:

(function(modules){
  xxxx
})({
"模块名":function(){"use strict" eval(模块代码)}//模块名 就是 import 时的 名字
})

webpack编译出来的js如果含有es6代码是不会转换成ES5的，但是转换的文件中使用了 Object.defineProperty 导致ie9以下无法使用，ie9以下能使用，可以手动将Object.defineProperty转换一下（或者有其他配置）

纯webpack 编译出来的 production 的js结构是
!function(e)
{}([function(){
依次摆放各模块的js

}])
同样由于使用了Object.defineProperty 不支持ie9，还有使用了 xx.保留字 低版本ie也不支持