webpack打包

1.webpack是什么？

1.webpack构建工具：用来打包的
2.自带模块化(commonjs规范)
3.编译：es6 -> es5 , jsx -> es5 , ts(typescript) -> js
4.gulp所做的事情，webpack都可以做到
5.自带服务器，服务器也是基于Node（webpack-dev-server）
6.那些环境经常使用到webpack：react 、 vue
7.webpack版本：1.x 、2.x 、3.x 、4.x版本

2.安装webpack3.x

1.安装全局webpack：任何位置都可以安装

 npm install -g webpack@3.x

2.项目初始化package.json

 npm init -y   //全选yes

3.安装项目依赖的webpack ：必须安装在具体的文件夹下

 npm install -D webpack@3.x

4.项目根目录创建两个文件夹src和dist
src:源码文件
dist：编译之后的文件
5.编写代码
app.js:document.write(“hello webpackc”);
6.执行webpack
webpack 路径/入口文件 路径/出口文件

 webpack src/app.js    dist/bundle.js

7.编写代码
hello.js：
module.exports = function(){
var hello = document.createElement(“div”);
hello.textContent = “hello Webpack3.x”;
return hello;
}

3.生成webpack.config.js配置文件

webpack3.x中需要自己写这个配置文件
webpack4.x中可以自动生成这个配置文件

配置入口和出口

 module.exports = {
    entry:__dirname +"/src/app.js",
    output:{
      path:__dirname + "/dist",
      filename:"bundle.js"
    }
  }

此时执行时，直接在命令行写一个webpack就可以执行

4.webpack执行的快捷方案

在package.json文件中代替webpack的执行

  "scripts": {
    "build":"webpack"
  }

执行：npm run build
该功能可以定义不同命令行信息的功能，此时执行build=webpack
注意：后面可以用此功能执行调试与上线

5.调试

1.目的：生成错误信息文件
2.缺点：降低运行速度，所以上线时会被删除
3.方法：配置webpack.co