webpack4流程笔记

初始化

mkdir webpack-demo   ->新建文件夹  
cd webpack-demo  ->进入文件夹

• 第一步 npm init -y  -> 初始化项目(生成package.js)
• 第二步 npm install webpack webpack-cli --save-dev  ->(下载webpack与webpack-cil)

加载资源

• CSS: npm install --save-dev style-loader css-loader
• 图片: npm install --save-dev file-loader
• 数据: npm install --save-dev csv-loader xml-loader
• ES6解析: npm install -D babel-loader @babel/core @babel/preset-env
   npm i -D style-loader css-loader file-loader csv-loader xml-loader babel-loader @babel/core @babel/preset-env

目前为止学习的所有插件:

• 第三步 @babel/core @babel/preset-env autoprefixer babel-loader css-loader file-loader html-webpack-plugin mini-css-extract-plugin postcss-loader style-loader webpack webpack-cli webpack-dev-server
• ->(把以学过的所有插件加载下来)

下载本地服务器

• 第四步 npm i webpack-dev-server -D  -> (dev-server会生成一个虚拟服务器)

进入监视模式: webpack --watch

• 进入监视模式之后不需要再次输入 npm run build 保存文件自动刷新页面

server的命令

• 在浏览器打开: webpack-dev-server --open
  改变端口号: webpack-dev-server --open --port 3000
  直接打开html: webpack-dev-server --open --port 8080 --contentBase src

server的配置

　　devServer: { // 开发服务器的配置
　　port: 3000, // 端口号
　　progress: true, //
　　contentBase: './dist', // 打开的文件路径
　　open: true // 是否打开
　　},

分离css的插件

• 插件: npm i -D html-webpack-plugin
• new MiniCssExtractPlugin({
  filename: 'main.css'
  })
• use里配置: MiniCssExtractPlugin.loader

自动添加CSS3前缀的插件

• 插件: npm i -D postcss-loader autoprefixer
• 然后配置一个 postcss.config.js 的文件
• module.exports = {
  plugins: [require('autoprefixer')]
  }

压缩CSS的插件

• 插件: npm -D optimize-css-assets-webpack-plugin;
• const optimizeCss = require('optimize-css-assets-webpack-plugin');

• optimization: { // 优化项
  minimizer: [
  new optimizeCss()
  ]
  },
  

  　　

压缩JS的插件

• 插件: npm -D uglifyjs-webpack-plugin;
• const UglifyJsPlugin = require('uglifyjs-webpack-plugin');

• new UglifyJsPlugin({ // 压缩JS
  cache: true, // 是否缓存
  parallel: true, // 是否压缩多个
  sourceMap: true // es6的源码映射
  }),
  

  　　

解析ES6的插件

• 插件: npm install -D babel-loader @babel/core @babel/preset-env
• 插件2(解析更高级的语法ES7): npm i -D @babel/plugin-proposal-class-properties
• 插件3: npm i -D @babel/plugin-transform-runtime 依赖: @babel/runtime -save

• {
  test: /.js$/,
  use: {
  loader: 'babel-loader',
  options: { // babel-loader 把es6转换成es5
  presets: [
  '@babel/preset-env'
  ]
  }
  }
  },
  

  　　

  babel-loader: 解析es6的loader
  @babel/core: 模块
  @babel/preset-env: 把高级语法转换成es5的插件

JS代码效验插件

插件: npm i eslint eslint-loader -D

解析less

• {
  test: /.less$/,
  use: [
  MiniCssExtractPlugin.loader,
  'css-loader',
  'postcss-loader',
  'less-loader'
  ]
  }
  

  　　

　　

设置HtmlWebpackPlugin

• 插件: npm install --save-dev html-webpack-plugin

• new HtmlWebpackPlugin({
  template: './src/index.html',
  filename: 'index.html',
  minify: {
  removeAttributeQuotes: true, // 删除index里的双引号
  collapseWhitespace: true, // 折叠空行 变成一行
  },
  // hash: true // 哈希戳
  }),
  

  　　

webpack.config.js配置

　　

• const path = require('path');
  const HtmlWebpackPlugin = require('html-webpack-plugin');
  const MiniCssExtractPlugin = require('mini-css-extract-plugin'); // 分离css的插件
  
  module.exports = {
  mode: 'development', // 模式 默认两种 production-生产 development-开发
  entry: { // 入口
  index: './src/index.js'
  },
  devtool: 'inline-source-map', // 报错源
  module: {
  rules: [
  {
  test: /\.css$/,
  use: [
  MiniCssExtractPlugin.loader,
  'css-loader',
  'postcss-loader'
  ]
  },
  {
  test: /\.js$/, // normal 普通的
  use: {
  loader: 'babel-loader',
  options: { // babel-loader 把es6转换成es5
  presets: ['@babel/preset-env']
  }
  },
  include: path.resolve(__dirname, 'src'),
  exclude: /node_modules/
  },
  {
  test: /\.(png|svg|jpg|gif)$/,
  use: {
  loader: 'file-loader',
  options: {
  outputPath: '../imgs/'
  }
  }
  },
  { test: /\.(woff|woff2|eot|ttf|otf)$/, use: ['file-loader'] }
  ]
  },
  plugins: [
  new HtmlWebpackPlugin({ // 创建新的html
  template: './src/index.html',
  filename: 'index.html'
  }),
  new MiniCssExtractPlugin({
  filename: './css/main.css'
  })
  ],
  devServer: { // 打开浏览器
  contentBase: './dist',
  open: true,
  port: 3000,
  inline: true
  },
  output: { // 出口
  filename: 'bundle.js',
  path: path.resolve(__dirname, 'dist')
  }
  }
  

  　　

　　

package.json scripts配置

　　"build": "webpack",
　　"watch": "webpack --watch",
　　"start": "webpack-dev-server --open",
　　"server": "node server.js"

设置HtmlWebpackPlugin

• 插件: npm install --save-dev html-webpack-plugin
• 蓝文件夹: 

  const HtmlWebpackPlugin = require('html-webpack-plugin');
  plugins: [
  new HtmlWebpackPlugin({
  title: 'Output Management'
  })
  ],
  

  　　

清理/dist文件夹

　　npm install --save-dev clean-webpack-plugin
　　const { CleanWebpackPlugin } = require('clean-webpack-plugin');
　　new CleanWebpackPlugin(),