webpack的一般性配置及说明

1.webpack的常规配置

先给出一个示例：

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

module.exports = {
  entry: {
    core: ["react", "react-dom", "redux", "react-router","react-redux"],
    main: './src/index.js'
  },
  devServer: {
   contentBase: './dist',
   port: 9000
  },
  plugins: [
    new CleanWebpackPlugin(['dist']),
    new HtmlWebpackPlugin({
      title: 'Development',
      template: 'index.html'
    })
  ],
  output: {
    filename: '[name].js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
      rules: [
        {
          test: /\.js$/,
          exclude: /(node_modules)/,
          use: {
            loader: 'babel-loader',
          }
        },
        {
          test: /\.css$/,
          use: ['style-loader','css-loader']
        },
        {
          test: /\.less$/,
          use: ['style-loader','css-loader',"less-loader"]
        },
      ]
    }
};

以上是一个非常简单的配置文档，主要做了以下几件事：

1.配合React框架将react依赖和入口文件分开打包成两个js文件，并命名为main和core，打包后输出。

// entry定义了webpack该从哪里开始编译，即入口。output定义了输出规则和目标文件夹。webpack允许多个入口和多个输出。
  entry: {
    core: ["react", "react-dom", "redux", "react-router","react-redux"],
    main: './src/index.js'
  },
  output: {
    //这里生成文件名分别为core.js,main.js
    filename: '[name].js',
    path: path.resolve(__dirname, 'dist')
  },
 

2.配置了一个开发代理服务器，监听本地端口9000。

  devServer: {
   devtool: 'source-map',
    //定义测试服务器的根目录位置
   contentBase: './dist',
   //监听端口
   port: 9000,
   //404时自动跳转到的文件
   historyAPIFallback: {
        index: 'index.html'
     }
   https: true,
   compress: true,
   allowedHosts: ['xxx.com', 'xx.com']
  }

关于devtool的配置项参考以下链接：https://webpack.js.org/configuration/devtool/#devtool

 

3.设置了清除缓存插件，以及生成入口文件index.html。

  plugins: [
    //该插件会再重新编译的时候自动删除dist文件夹里面的缓存文件
    new CleanWebpackPlugin(['dist']),
    //该插件可以在编译完成后自动生成一个index.html文件，并将生成的js文件插入为脚本，作为网站的入口。
    new HtmlWebpackPlugin({
      title: 'Development',
      //此处定义index文件的模版，如果没有模版webpack就会自己生成。若有模版，则会在模版文件尾部插入生成的脚本。
      template: 'index.html'
    })
  ]

 index.html模版文件内容参考：

<!DOCTYPE html>
<html>
<head>
	<title>Write App</title>
</head>
<body>
	<div id="root"></div>
</body>
</html>

 打包编译完成后的index.html文件如下：

<!DOCTYPE html>
<html>
<head>
	<title>Write App</title>
</head>
<body>
        <!--渲染React组件需要root的div-->
	<div id="root"></div>
        <script type="text/javascript" src="core.js"></script>
        <script type="text/javascript" src="main.js"></script>
</body>
</html>

 

4.为不同格式的文件设置不同的加载器，使用babel编译js，less编译样式文件。

module: {
      rules: [
        {
          test: /\.js$/,
          //需要排除掉node_modules文件夹里面的文件
          exclude: /(node_modules)/,
          //此处定义babel处理器，另外需要配置.babelrc配置文件，参见babel官网说明
          use: {
            loader: 'babel-loader',
          }
        },
        {
          test: /\.css$/,
          use: ['style-loader','css-loader']
        },
        {
          test: /\.less$/,
          //如果使用了第三方样式框架，less文件需要编译，则需要使用less-loader
          use: ['style-loader','css-loader',"less-loader"]
        },
      ]
    }

 

posted @ 2018-05-16 22:11  明潭  阅读(224)  评论(0)  编辑  收藏  举报