• 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"]
            },
          ]
        }
    危楼高百尺,手可摘星辰。不敢高声语,恐惊天上人。
  • 相关阅读:
    1025 反转链表
    Vue--修饰符
    Vue--watch
    Vue--防止页面闪烁
    Vue--过滤器
    Vue--自定义指令
    Vue--生命周期
    vue--父子组件传递数据
    vue--父子组件调用彼此的方法
    Celery--beat
  • 原文地址:https://www.cnblogs.com/mingtan/p/9043920.html
Copyright © 2020-2023  润新知