webpack4+babel7入门到精通(三、使用公共js代码)

一、在项目中使用jquery

• 1、安装包

    npm install jquery

• 2、在入口文件单独使用一个

    // 定义入口文件
    let entry = {
      vendor: 'jquery',
    };

• 3、在打包html插件的时候引入

    glob.sync('./src/*.html').forEach(item => {
      const filename = path.basename(item).toLowerCase();
      const chunk = filename.replace('.html', '');
      entry[chunk] = `./src/${chunk}.js`;
      HtmlPlugin.push(
        new HtmlWebpackPlugin({
          filename: filename,
          template: path.resolve(item),
          inject: 'body',
          title: 'webpack测试',
          chunks: [chunk, 'vendor'], // 手动引入vendor
          hash: true,
          minify: {
            removeAttributeQuotes: true, // 去除引号
            collapseWhitespace: false, // true代码合并成一行
          }
        })
      )
    })

• 4、在插件处配置

    plugins: [
        new webpack.ProvidePlugin({
          $: 'jquery'
        }), // 使用jquery
        cssExtract,
        lessExtract,
        new webpack.HotModuleReplacementPlugin(), // 热更新,每次修改后会自动刷新
        new CleanWebpackPlugin(), // 每次打包清空dist文件夹
        ...HtmlPlugin,
        new PurifycssWebpack({
          paths: glob.sync(path.resolve('src/*.html'))
        })
      ],

• 5、直接在js文件中引入

    console.log($);
    $(function () {
      $('#box').on('click', function () {
        console.log('你点击了我')
      })
    })

二、使用bootstrap样式库

• 1、安装

    npm install url-loader -D  // bootstrap中有使用字体的引入
    npm install bootstrap

• 2、配置规则

    module: {
        rules: [
          ...
          {
            test: /\.(eot|woff|woff2|ttf)$/,
            use: [
              {
                loader: 'url-loader',
                options: {
                  limit: 5 * 1024
                }
              }
            ]
          }
        ]
      },

• 3、配置别名

    resolve: {
        extnesions: ['.js', '.json'], // 引入模块的时候,可以不需要使用扩展名
        alias: { // 配置别名,在文件引入的时候就可以直接使用bootstrap,不需要引入下面一大串
          'bootstrap': 'bootstrap/dist/css/bootstrap.css',
        }
    }

• 4、js文件中引入样式

    require('bootstrap');

• 5、页面中使用

    <button type="button" class="btn btn-success">按钮</button>

三、使用webpack配置react的开发

• 1、安装包

    npm install react react-dom 

• 2、安装babel相关的包(会在下一个章节重点讲解)

    npm i @babel/core babel-loader @babel/preset-env @babel/preset-react -D

• 3、在项目的根目录下创建一个.babelrc的文件

    {
      "presets": [
        "@babel/preset-env", 
        "@babel/preset-react"
      ]
    }

• 4、配置规则

    module: {
        rules: [
            {
                test: /\.jsx?$/,
                exclude: /node_modules/, // 不处理node_modules文件夹
                use: [
                    {
                        loader: 'babel-loader', // 自动会去读取.babelrc的配置
                    }
                ],
            },
            ...
        ]
    }

• 5、运行项目