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、运行项目