webpack常用插件复习巩固

1,初始化

  npm init -y
  
  生产package.json文件

2,创建src文件夹

3,创建index.html

   ul>li{这是第$个li}*9

4,npm install jquery -s

发现需要解决js兼容性问题，

import $ from ‘jquery’ 通过发现这种方式导入报错，

5,安装webpack

 1, npm install webpack webpack-cli -D 
 2, 创建webpack.config.js文件
 3, module.exports = {
    mode: "development"
  }
  4,package.json文件中配置scripts命令
   "dev": "webpack"
  5, 运行： npm run dev

6,webpack 默认约定

打包入口文件： src->index.js

打包出口文件： dist-> main.js

7,webpack 自动打包功能

  1, npm install webpack-dev-server -D
  2, 修改package.json -> scripts中的dev命令
    "scripts" {
      "dev": "webpack-dev-server"
    }
  3, 将src -> index.html中的srcipt脚步引用路径修改为"/bundle.js"
  4, 再次执行运行 npm run dev 

注意

webpack-dev-server 会启动一个实时打包的http 服务器

webpack-dev-server

打包生产的输出文件，默认放到了项目根目录中，而且是虚拟的，看不见的

8,webpack 配置html-webpack-plugin 生产预览页面

1， npm install html-webpack-plugin -D

2, 修改webpack.config.js文件头部区域，配置下面信息

// 导入生产预览页面的插件，得到一个构造函数
const HtmlWebpackPlugin = require('html-webpack-plugin')
const htmlPlugin = new HtmlWebpackPlugin({
  template: './src/index.html', // 指定要用到的模版
  filename: 'index.html // 指定生成文件的名称
})

3, 修改 webpack.config.js 文件
module.exports = {
plugins: [htmlplugin]
}

9,webpack 配置自动打包参数

package.json中配置， open, host, port

"scripts" {
  "dev": "webpack-dev-server --open --host 127.0.0.1 --port 8888"
}

10,打包处理css文件

1， npm install style-loader css-loader -D 处理css文件的loader

2， 在webpack.config.js中添加配置loader

  module: {
    rules: [
      {test: /\.css$/, use:['style-loader','css-loader']}
    ]
  }
 ****注意****
use数组中指定的loader顺序固定的
多个loader 的调用顺序：从后往前调用

11,打包处理less,scss文件

   npm install less-loader -D
   
       {test: /\.less$/, use:['style-loader','css-loader','less-loader']}
   npm install sass-loader node-sass -D
       {test: /\.scss$/, use:['style-loader','css-loader','scss-loader']}

注意
可能会报错：Error: Cannot find module ‘less’
解决： npm install less -D

12,配置postCSS 自动添加css的兼容性前缀

  1,  npm install postcss-loader autoprefixer -D 
  2, 在项目中创建postcss的配置文件postcss.config.js 并初始化配置
     const autoperfixer = require('autoprefixer') // 导入自动添加前缀的插件
     module.exports = {
       plugins: [autoperfixer]
     }
  3, 在webpack.config.j的module->rules中，新增一个loader
     module: {
       rules: [
       {test: /\.css$/, use:['style-loader','css-loader','postcss-loader']}
       ]
     }

13,打包样式表中的图片和字体文件

   1， 运行 npm install url-loader file-loader -D 文件
   2， 在 webpack.config.js 的module->rules添加 loader规则
     module: {
       rules: [
         {test: /\.jpg|png|gif|bmp|ttf|eot|svg|woff|woff2$/,
         use: 'url-loader?limit=16940'}
       ]
     }
    注意：?limit是对图片的大小做了限制

14,webpack 打包处理JS文件中的高级语法

   1，安装babel转换器相关的包  
      npm install babel-loader @babel/core @babel/runtime -D
   2, 安装babel语法插件相关的包
      npm install @babel/preset-env @babel/plugin-transform-runtime @babel/plugin-proposal-class-properties -D
   3, 在项目中创建babel-config.js,并初始化配置
      module.exports = {
        presets: ['@babel/preset-env'],
        plugins: ['@babel/plugin-transform-runtime', '@babel/plugin-proposal-class-properties']
      }
    4, 在webpack.config.js中新增一个loader规则
     {test: /\.js$/,use: 'babel-loader', exclude: /node_modules/}
    注意： 必须要有exclude这一项， 因为node_modules的js是第三方插件，不要babel-loader再次处理