webpack4.x 各项简单配置

webpack4.x 各项简单配置

1.webpacks是什么？

是模块打包机，分析目录结构，找到js模块（包括了浏览器不能直接识别的代码如，typescript、sass），打包成合适的格式，供游览器访问。

优势：模块打包，和构建项目
打包的优势：

• 1.模块化，拆分了业务的复杂的js代码
• 2.js扩展了==》基于原型==》基于class（typescript，es6）
  面试：webpack、grunt、gulp不同：grunt、gulp优化流程的工具，webpack模块化支持工具，兼有优化流程功能

2.webpack4.x安装

• 1.先全局安装 npm install webpack -g ;npm install webpack-cli -g
• 2.再npm init 生成package.json
• 3.局部安装
  npm install webpack -S
  npm install webpack-cli S
• 4.webpack –mode production(生产环境)
  webpack –mode development(开发环境)

3.配置
1.webpack四个核心概念
入口(entry)
输出(output)

• loader:

     webpack支持js，不支持css和html，让webpack支持，则需要loader
     而palugins可以有效打包或压缩css，js，html，图片。
  

• 插件(plugins)

  [默认配置
  sr
  index.js
  dist
  main.js]

  2.配置文件

• 1.DevServe

r

  首先是安装devserver：npm install webpack-dev-server -D;

  然后在webpack.config.js中配置

    devServer:{

      contentBase:"./public",//选择服务器路径,即服务器根目录选择

      host:'localhost',//服务器地址

      port:"3000",//端口

      inline:true//实时刷新

    }

• 2.在package.json

  配置：

  “scripts”: {

  "start": "webpack-dev-server --open"//webpack-dev-server --open --inline(这个也是可以的，做到实时刷新)
  

  },

  3.loader：加载程序

  1.引入css需要

   style-loader css-loader
  
   安装:npm install style-loader css-loader -D(s);
  
   同时css若有图片加载，光有style-loader，和css-loader还不行，还需要有file-loader
  
      file-loader安装：install file-loader -D
  
    2.loader配置
  
      module: {
  
          rules: [
  
            { test: /\.css$/, use:['style-loader','css-loader'] },//正则，表示后缀为css的文件
  
            { test: /(\.jpg|\.png|\.jpeg|\.gif)$/, use:['file-loader']}//同理......
  
          ]
  
      }
  
  3.html-withimg-loader
  
    使得打包的html支持图片
  
    安装：npm install html-withimg-loader -D(S);
  
    配置：{test:/\.html$/,use:'html-withimg-loader'}
  
  4.字体图标
  
     使用的是file-loader
  
     配置：{test: /\.(woff|ttf|svg|eot|xttf|woff5)$/, use:'file-loader?limit=1024&name=./fonts/[name].[ext]'}//后面的参数，limit是限制文件大小，name是指定打包到哪个文件，同时指明打包文件名字，类型
  

• 4.插件

  html-webpack-plugin

  src:一般是开发阶段

  public:一般是生产阶段[一般这2个阶段文件要对应]

  1.安装 html-webpack-plugin
  
     安装命令：npm install html-webpack-plugin -D(S)
  
  2.配置html-webpack-plugin
  
    第一步：引入html-webpack-plugin== >const HtmlWebpackPlugin = require('html-webpack-plugin');
  
    第二步：配置
  
            plugins: [
  
                //new webpack.optimize.UglifyJsPlugin(),
  
                new HtmlWebpackPlugin({
  
                    template: './src/index.html',
  
                    filename: 'a.html'//改html的输出文件名index.html改为了a.hmtl,
  
                    minify:{
  
                        removeAttributeQuotes:true,//去除引号
  
                        removeComments:true//去除注释
  
                        removeEmptyAttributes:true//去除空属性
  
                        collapseWhitespace:true//去除空格
  
                    }
  
                })
  
            ]
  

• 5.css提取

  插件下载：npm intall extract-text-webpack-plugin@next -D(s);
  
  const ExtractTextPlugin=require("extract-text-webpack-plugin")
  
  配置
  
      new ExtractTextPlugin('./css/[name].css');
  
      同时要对style-loader和css.loader进行改造==>
  
         module: {
  
          rules: [
  
            { test: /\.css$/, use:ExtractTextPlugin.extract({
  
              fallback:'style-loader',
  
              use:[{
  
                loader:'css-loader?name=./css/[name].[ext]',
  
                options:{
  
                  minimize:true,//代码压缩
  
                }
  
              }],
  
              publicPath;"../"
  
            })},
  
          ]
  
        },              
  

• 6.babel

  核心：babel-core
  
  功能：babel-loader babel-preset-env babel-preset-react
  
  安装：npm install babel-core babel-loader babel-preset-env babel-preset-react -S
  
  配置(一)：
  
  
  
      {
  
        test:/\.(jsx|js)$/,
  
        use:{
  
          loader:'babel-loader',
  
          options:{
  
            presets:['env','react']
  
          }
  
        },
  
        exclude:/node_modules/ //排除不编译node_modules文件        
  
      }
  
  配置(二)：
  
      在根目录下建一个.babelrc文件
  
         再在其文件中写人{"presets":['env','react']}
  
         在webpack.config.js下写入：
  
      {
  
        test:/\.(jsx|js)$/,
  
        use:{
  
          loader:'babel-loader'
  
        },
  
        exclude:/node_modules/ //排除不编译node_modules文件        
  
      }
  

• 7.引入第三方文件

    在4.0中极大简化了配置。
  
    (1)安装jq：npm install jquery -D
  
    (2)在入口js文件 import $ from 'jquery';即可，非常简单