I learn together with webpack using a configuration file (b)

Then learn with me (a) of webpack project, we use the following configuration file
using npx webpack -h we can view the configuration parameters of webpack
from the command added in package.json our point of view, when the project needs more and the more time configuration, it is necessary to add more parameters entered, then it will want to later maintenance difficulties
to solve this problem, we are mainly these parameters as objects, specially in the configuration file which
in webpack each package when the configuration file to read
new webpack.config.js file, add the following code

module.exports = {
    entry:'./src/index.js',
    output:{
        filename:'bundle.js'
    },
    mode:'development'
}

Next we modify package.json file, remove package.json the configuration parameters of the package

{
  "name": "firstwebpackdemo",
  "version": "1.0.0",
  "description": "webpack01",
  "main": "index.js",
  "scripts": {
    "build": "webpack"
  },
  "keywords": [
    "webpack"
  ],
  "author": "jser_dimple",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^4.39.1",
    "webpack-cli": "^3.3.6"
  }
}

Modify the contents of the file add-content.js

export default function(){
    document.write('i\m using using config file')
}

Next we execute npm run build, webpack will read ahead webpack.config.js, then packaged

to be here, then we have to configure the initial environment webpack's finished, but we found that after we packed to go manually run the project
we after packing hope to run the project, the project can be run automatically, this time we need a webpack-dev-server

in order to facilitate start webpack-dev-server we add a dev command in package.json

then we would also like to webpack-dev- server configuration, the following edit webpack.config.js

module.exports = {
    entry:'./src/index.js'fsad,
    output:{
        filename:'./bundle.js'
    },
    mode:'development',
    devServer:{
        publicPath:'/dist'
    }
}

Before starting the service, we have to change my add-content.js

//add-content
export default function(){
    document.write('i\m webpack-dev-server')
}

接下来我们使用npm run dev

webpack-dev-server小总结
1.让webpack进行模块打包，并处理打包结果的资源请求
2.作为普通的web Server，处理静态资源文件请求
3.webpack-dev-server只是将打包结果放在内存中，并不会写入实际的bundle.js
在每次webpack-dev-server接收到请求时，都只是将内存中的打包结果返回给浏览器，并不会写入dist中
4.wbpack-dev-server还有一项很便捷的特性就是自动刷新，我们修改代码无需再运行，浏览器中的内容会自动更新

I learn together with webpack using a configuration file (b)

Guess you like