2、webpack添加web服务、html-webpack-pl

2019-07-25 本文已影响2人圆梦人生

接着基础环境工程继续添加：

1、在项目根目录创建：index.html

2、添加web服务

2-1 添加web服务是为了dev调试方便，启动一个静态服务，执行命令：
```
  yarn add webpack-dev-server -D
```

2-2、在package.json中配置dev模式

  "scripts": {
    "build": "webpack --config webpack.config.js",
    "dev": "webpack-dev-server"
  },

2-3、在webpack.config.js中添加webpack-dev-server

// 开发服务的配置
devServer: {
  // 端口，默认8080
  port: '8099',
  // 进度条
  progress: true,
  // 启动后访问目录，默认是项目根目录，这个设置到打包后目录
  contentBase: './build',
  // 启动压缩
  compress: true
},

3、html-webpack-plugin插件

3-1、执行命令
```
  yarn add html-webpack-plugin -D
```

-3-2、在webpack.config.js中添加插件配置

  // html-webpack-plugins 插件
  let HtmlWebpackPlugins = require('html-webpack-plugin');
  ...
  // 插件配置
  plugins: [
    new HtmlWebpackPlugins({
        // 模板位置
        template: 'index.html',
        // 文件名
        filename: 'index.html',
        // 生产开启，压缩代码
        minify: {
            // 删除html双引号
            removeAttributeQuotes: true,
            // 压缩成一行
            collapseWhitespace: true
        },
        // 文件哈希
        hash: true
    })
  ]
  ...

4、webpack.config.js 完整配置

//  webpack是node写出来的， 需要node的写法
let path = require('path');
// path.resolve 相对路径转成绝对路径
// console.log(path.resolve('dist'));
// 以当前目录
// console.log(__dirname);

// html-webpack-plugins 插件
let HtmlWebpackPlugins = require('html-webpack-plugin');

// webpack相关配置
module.exports = {
    // 开发服务的配置
    devServer: {
        // 端口，默认8080
        port: '8099',
        // 进度条
        progress: true,
        // 启动后访问目录，默认是项目根目录，这个设置到打包后目录
        contentBase: './build',
        // 启动压缩
        compress: true
    },
    // 模式，2种：生产模式(production)和开发模式(development)
    // 开发模式不压缩打包后代码，生产模式压缩打包后代码
    mode: 'development',
    // 入口,表示从哪里开始打包
    entry: './src/index.js',   
    // 表示出口(输出后文件相关配置)
    output: {   
        // 打包后的文件名,产生哈希
        //filename: 'bundle.[hash].js',  
        // 哈希8位
        filename: 'bundle.[hash:8].js',  
        // 输出后的路径(必须是一个绝对路径)
        path: path.resolve(__dirname, 'dist')
    },
    // 插件配置
    plugins: [
        new HtmlWebpackPlugins({
            // 模板位置
            template: 'index.html',
            // 文件名
            filename: 'index.html',
            // 生产开启，压缩代码
            minify: {
                // 删除html双引号
                removeAttributeQuotes: true,
                // 压缩成一行
                collapseWhitespace: true
            },
            // 文件哈希
            hash: true
        })
    ]
}

5、index.html模板

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>index</title>
</head>
<body>
    
</body>
</html>

2、webpack添加web服务、html-webpack-pl

猜你喜欢

热点阅读