webpack4+babel7入門到精通(3、使用公共js代碼)

時間 2019-12-05

標籤 webpack4+babel7 webpack babel 入門精通使用公共代碼欄目 JavaScript 简体版

原文原文鏈接

1、在項目中使用`jquery`

一、安裝包css
```
npm install jquery
複製代碼
```

二、在入口文件單獨使用一個html

// 定義入口文件
let entry = {
  vendor: 'jquery',
};
複製代碼

三、在打包html插件的時候引入node

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代碼合併成一行
      }
    })
  )
})
複製代碼

四、在插件處配置react

plugins: [
    new webpack.ProvidePlugin({
      $: 'jquery'
    }), // 使用jquery
    cssExtract,
    lessExtract,
    new webpack.HotModuleReplacementPlugin(), // 熱更新,每次修改後會自動刷新
    new CleanWebpackPlugin(), // 每次打包清空dist文件夾
    ...HtmlPlugin,
    new PurifycssWebpack({
      paths: glob.sync(path.resolve('src/*.html'))
    })
  ],
複製代碼

五、直接在js文件中引入jquery

console.log($);
$(function () {
  $('#box').on('click', function () {
    console.log('你點擊了我')
  })
})
複製代碼

2、使用`bootstrap`樣式庫

一、安裝webpack

npm install url-loader -D  // bootstrap中有使用字體的引入
npm install bootstrap
複製代碼

二、配置規則web

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

三、配置別名shell

resolve: {
    extnesions: ['.js', '.json'], // 引入模塊的時候,能夠不須要使用擴展名
    alias: { // 配置別名,在文件引入的時候就能夠直接使用bootstrap,不須要引入下面一大串
      'bootstrap': 'bootstrap/dist/css/bootstrap.css',
    }
}
複製代碼

四、js文件中引入樣式npm
```
require('bootstrap');
複製代碼
```

五、頁面中使用json

<button type="button" class="btn btn-success">按鈕</button>
複製代碼

3、使用`webpack`配置`react`的開發

一、安裝包

npm install react react-dom 
複製代碼

二、安裝babel相關的包(會在下一個章節重點講解)

npm i @babel/core babel-loader @babel/preset-env @babel/preset-react -D
複製代碼

三、在項目的根目錄下建立一個.babelrc的文件

{
  "presets": [
    "@babel/preset-env", 
    "@babel/preset-react"
  ]
}
複製代碼

四、配置規則

module: {
	rules: [
		{
			test: /\.jsx?$/,
			exclude: /node_modules/, // 不處理node_modules文件夾
			use: [
				{
					loader: 'babel-loader', // 自動會去讀取.babelrc的配置
				}
			],
		},
	 	...
	]
}
複製代碼