Webpack4 + Babel7 start to master (3, using common JS code)

I. Use it in the projectjquery

• 1. Installation package

  npm install jquery
  Copy the code

• 2. Use a separate entry file

  // Define the entry file
  let entry = {
    vendor: 'jquery'};Copy the code

• 3. Introduce it when you package the HTML plug-in

  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 test'.chunks: [chunk, 'vendor'].// Manually import vendor
        hash: true.minify: {
          removeAttributeQuotes: true.// remove quotes
          collapseWhitespace: false.// the true code is merged into a single line}}})))Copy the code

• 4. Configure in the plug-in

  plugins: [
      new webpack.ProvidePlugin({
        $: 'jquery'
      }), / / using jquery
      cssExtract,
      lessExtract,
      new webpack.HotModuleReplacementPlugin(), // Hot update, automatically refreshed after each change
      new CleanWebpackPlugin(), // Clear the dist folder every time you pack. HtmlPlugin,new PurifycssWebpack({
        paths: glob.sync(path.resolve('src/*.html'))})],Copy the code

• 5, directly into the JS file

  console.log($);
  $(function () {$('#box').on('click'.function () {
      console.log('You clicked on me')})})Copy the code

Second, the use ofbootstrapStyle library

• 1, install,

  NPM install url-loader -d // bootstrap has been introduced to use fontsCopy the code

• 2. Configure rules

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

• 3. Configure the alias

  resolve: {
      extnesions: ['.js'.'.json'].// When importing modules, you don't need to use the extension
      alias: { // Configure the alias. When importing the file, bootstrap can be used directly, without importing the following string
        'bootstrap': 'bootstrap/dist/css/bootstrap.css',}}Copy the code

• 4. Introduce styles into js files

  require('bootstrap');
  Copy the code

• 5. Use in pages

  <button type="button" class="btn btn-success">button</button>
  Copy the code

Three, use,webpackconfigurationreactThe development of

• 1. Installation package

  npm install react react-dom 
  Copy the code

• 2. Install Babel related packages (highlighted in the next section)

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

• Create a.babelrc file in the root directory of the project

  {
    "presets": [
      "@babel/preset-env"."@babel/preset-react"]}Copy the code

• 4. Configure rules

  module: {
  	rules: [{test: /\.jsx? $/.exclude: /node_modules/.// do not process the node_modules folder
  			use: [
  				{
  					loader: 'babel-loader'.// Automatically read the configuration of.babelrc}],},... ] }Copy the code

• 5. Run projects