Webpack入门之二:实战配置开发和线上环境

如何配置开发和线上环境

开发环境配置

安装 webpack-dev-server

npm install -D webpack-dev-server

在package.json的scripts中配置命令

{
    scripts: {
        "start": "webpack-dev-server --open",
    }
}

为了让我们bundle文件直接注入到默认的html文件中,我们需在配置中引入 html-webpack-plugin

npm install -D html-webpack-plugin

修改配置 webpack.config.js,

const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  mode: 'development',
  entry: {
    index: './src/main.js',
  },
  output: {
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  devtool: 'inline-source-map',
  devServer: {
    contentBase: './dist'
  },
  plugins: [
     new HtmlWebpackPlugin({
       title: 'My Application'
    }),
  ],
}

npm run start 启动过后,就可以正常访问项目地址了。

注:这时候会发现它的输出内容默认 index.html 并不会出现在文件夹中,可以理解为 webpack-dev-server 是动态的创建内容然后作为结果返回给浏览器的。

常见的一种情况是,可能需要有多个html的入口,比如有登陆页 和 项目主体页,可能就需要配置多个 HtmlWebpackPlugin,你可以这样进行配置,其中 chunks中的值跟entrys中对应:

  entry: {
    index: './src/main.js',
    login: './src/login.js'
  },
  plugins: {
    new HtmlWebpackPlugin({
        file: 'login.html',
        chunks: ['login'],
    }),
     new HtmlWebpackPlugin({
        file: 'index.html',
        chunks: ['index'],
    }),
  }

线上环境配置

我们需要在webpack.config.js中配置mode,移除 devtool、devServer、HtmlWebpackPlugin

const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  mode: 'production',
  entry: {
    index: './src/main.js',
  },
  output: {
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, 'dist')
  }
}

然后在 package.json 中配置 build

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

当然你也可以在开发环境中使用类似的配置,取一个更准确的名字即可

{
    scripts: {
        "watch": "webpack --watch"
    }
}

配置多入口的问题

在webpack中,使用HtmlWebpackPlugin对代码进行build常见的一种情形是:你有多个输出的html文件,比如登陆使用login.html 登陆成功后使用index.html

这里的配置和容易出错的情形,看下面的示例配置会有什么问题

不指定chunk和file

  output: {
    path: '/build'
  },    
  entry: {
    index: './src/main.js',
    login: './src/login.js'
  },
  plugins: {
    new HtmlWebpackPlugin({
        inject: true,
        template: './public/login.html'
    }),
     new HtmlWebpackPlugin({
        inject: true,
        template: './public/login.html'
    }),
  }

问题1:没有指名要将哪个chunk注入到html,结果是两个chunk的引用都会出现在输出的index.html中

问题2:template代表源文件,并不能代表最终生成的文件(需要使用file指定),结果是两个HtmlWebpackPlugin注入了不同模板内容到build/index.html,后者覆盖前者

现象是,build/index.html的内容来自于 /public/login.html,并且引入的js文件,包含了 login.bundle.jsindex.bundle.js

另外也存在一个 build/login.html,内容跟 public/login.html 一模一样,猜想是Webpack操作包含了 ”拷贝 + inject/写文件“,其中从 public/login.htmlbuild/login.html 的拷贝正常,但是 "inject/写文件"操作 被错误映射到了 /build/index.html 中。

修改后的配置

  output: {
    path: '/build'
  }    
  entry: {
    index: './src/main.js',
    login: './src/login.js'
  },
  plugins: {
    new HtmlWebpackPlugin({
        inject: true,
        template: './public/index.html',
        file: 'index.html',
        chunks: ['index']       
    
    }),
     new HtmlWebpackPlugin({
        inject: true,
        template: './public/login.html',
        file: 'login.html',
        chunks: ['login']
    }),
  }

chunks也制定了,输出文件也执行了,理论上应该正确了,结果发现 /build/index.html 和 /build/login.html中内容倒是都来自模板了,但是bundle都没有注入。

可以把filename和chunks分别注释掉,再进行build,会发现是chunks引起的。我们的代码必然是要使用chunks的, 因此找到了绕过它的方式。

曲线救国

首先配置injectfalse我们再指定打包的js/css文件名的时候,不采用[hash],而是直接使用 [name].bundle.js[name].css的方式,再在 public/login.html 中 和 public/index.html 中引用即将被打包好的css/js即可。

推荐阅读更多精彩内容