webpack相关（二）

webpack相关（二）

基础依赖

1    "css-loader": "^5.1.1",
2    "style-loader": "^2.0.0",
3    "html-webpack-plugin": "^5.3.0",
4    "webpack": "^5.24.4",
5    "webpack-cli": "^4.5.0",
6    "webpack-dev-server": "^3.11.2"
7    "@babel/core": "^7.13.10",
8    "@babel/preset-env": "^7.13.10",
9    "babel": "^6.23.0",
10   "babel-loader": "^8.2.2",
11	 "node-sass": "^5.0.0",
12   "sass-loader": "^11.0.1",

	{
        test: /\.m?js$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
    }

1，2 当项目引入css编译时所需要
3 为应用程序生成一个 HTML 文件
4，5 webpack编译
6 热更新
7，8，9，10 js编译成es5
11, 12 编译scss文件

启动项：

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack",
    "dev": "webpack serve --open --port 8081",
  }

打包 npm run build
热启动 npm run dev 启用端口为8081， 并自动打开默认浏览器