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

  首先是安装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';即可，非常简单

webpack4.x 各项简单配置

webpack4.x 各项简单配置

猜你喜欢