# webpack_Prictice

**Repository Path**: PorcoMar/webpack_Prictice

## Basic Information

- **Project Name**: webpack_Prictice
- **Description**: this is webpack prictice demo.......
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2018-03-21
- **Last Updated**: 2020-12-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

终端输入npm start 即可在public里生成bundle.js

直接点击index.html 打开

现在还没有写实时刷新生成bundle.js，需要改了之后手动npm start打包

  devtool:"eval-source-map",//没有这个报错会在bundle.js里，有了会在源文件报错
  entry:  __dirname + "/app/main.js",//已多次提及的唯一入口文件
  output: {
    path: __dirname + "/public",//打包后的文件存放的地方
    filename: "bundle.js"//打包后输出文件的文件名
  }



  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack",
    "server":"webpack-dev-server --open"
  },

  npm run server  浏览器会自动打开port为 1234 的服务器，实时刷新改变的东西，因为添加了webpack-dev-server构建了本地服务器并配置了实施刷新

  npm run server 是对你拼命start 的实时刷新，start什么样 server就什么样
  后面添加了三个插件 分离css 分配id 和 压缩生成的bundle.js 这三个插件在webpack.production.config.js里配置的 在package.json的build 里指定的路径script:{ "build": "NODE_ENV=production webpack --config ./webpack.production.config.js --progress"
  原因是，在产品阶段需要构建,当然在webpack.config.js也可以这么做

此demo可参照此网站：
  https://www.jianshu.com/p/42e11515c10f