webpack4.0--起步篇

源码参见https://github.com/Ching-Lee/webpack-dev

webpack安装

具体步骤参见官网
官网：https://www.webpackjs.com/guides/getting-started/

webpack安装

前提需要安装node.js,webpack建议安装到项目目录下而非全局

• 首先建立一个空目录webpack_learn
• 进入该目录，并初始化
  cd webpack-learn
  npm init -y
  会发现多出一个package.json文件在目录下
• 安装webpack，对于4.0以上版本需要安装webpack-cli
  npm install webpack webpack-cli --save-dev
  文件目录结构中增加node_modules,package.json,package-lock.json

webpack可以进行0配置

• 打包工具->输出后的结果(js模块)

• 打包:支持js模块化

  
  

webpack手动基础配置

• 默认配置文件的名字是webpack.config.js
  在目录下创建一个webpack.config.js文件

const path = require('path');

module.exports = {
  entry: './src/index.js', //入口文件
  output: {
    filename: 'bundle.js',// 出口文件
    path: path.resolve(__dirname, 'dist')
  },
  //mode默认有两种 开发模式：development(方便开发时看)  生产模式：production(默认)
  mode:'development'  
};

文件会生成到dist目录下的bunlle.js中

• 可以在执行时添加--config参数+配置文件名，来指定文件
  npx webpack --config webpack.config.js
  但这样很长不方便，所以我们可以在package.js中将该命令写入scripts脚本。

  
  
  

  运行npm run build

  
  

引入html打包插件html-webpack-plugin

目的：将src中的html文件经webpack打包后，自动生成到dist目录下，并且将src中的js文件加入到生成的dist目录下的html中。

• 插件安装

  
  
• 在webpack.config.js中配置插件

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/index.js', //入口文件
  output: {
    filename: 'bundle.js',// 出口文件
    path: path.resolve(__dirname, 'dist')
}，
  // 数组 放着所欲的Webpack插件
  plugins:[
  new HtmlWebpackPlugin({
    template:'./src/index.html',// 源文件
    filename:'index.html' // 生成文件
  })
  ]，

  //mode默认有两种 开发模式：development(方便开发时看)  生产模式：production(默认)
  mode:'development'  
};

打包之后看到dist目录下出现index.html文件，并且其中引入了脚本

我们希望生成的dist目录下的html被压缩

// 数组 放着所欲的Webpack插件
  plugins:[
  new HtmlWebpackPlugin({
    template:'./src/index.html',// 源文件
    filename:'index.html', // 生成文件
    minify:{
        removeAttributeQuotes:true, //取消标点
        collapseWhitespace:true, //取消空格
    },
    hash:true
  })
  ],

启用webpack-dev-server

目前我们只能通过静态页面来访问html，我们希望通过ip和端口号来访问。
webpack内置了此种服务，其内部是用express实现的

• 安装webpack-dev-server

  
  

• 启动服务

  
  
  
  

  同时我们可以对开发服务器进行配置
  在webpack.config.json中添加

module.exports = {
  devServer:{ //开发服务器的配置
    port:3000, //端口号
  },

在package.json添加执行脚本

 "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --config webpack.config.js",
    "dev":"webpack-dev-server"
  },

启动

样式处理

• 安装插件

• webpack.config.js中添加配置

// 通过此模块，能够将在insex.js中import的所有.css结尾的文件，
// 打包到html中的head标签里面
module: {
    rules: [
    {
        test: /\.css$/,
        use: [
        'style-loader',
        'css-loader'
        ]
    }
    ]
},

• src中新建css样式，并在js中引入

  
  
  

• 再次启动
  npm run dev
  可以看到在head中把样式加了进去

  
  

样式处理2

之前生成的css是直接使用内联的方式插入到html中的。

现在我们将css直接抽离成一个文件。

这里使用的插件是 mini-css-extract-plugin

• 安装

• 更改配置

const MiniCssExtractPlugin=require('mini-css-extract-plugin');
 // 数组 放着所需要的Webpack插件
  plugins:[
  new HtmlWebpackPlugin({
        template:'./src/index.html',// 源文件
        filename:'index.html', // 生成文件
        minify:{
            removeAttributeQuotes:true, //取消标点
            collapseWhitespace:true, //取消空格
        },
        hash:true
    }),
  new MiniCssExtractPlugin({
    filename:'style.css'
  })
  ],
// 通过此模块，能够将在insex.js中import的所有.css结尾的文件，
// 打包到html中的head标签里面
module: {
    rules: [
    {
        test: /\.css$/,
        use: [
        // 'style-loader',
        MiniCssExtractPlugin.loader,
        'css-loader'
        ]
    }
    ]
},

• npm run build之后可以看到css文件

  
  

为css中样式自动加前缀webkit等

插件：postcss-loader autoprefixer

• 修改配置

module: {
    rules: [
    {
        test: /\.css$/,
        use: [
        // 'style-loader',
        MiniCssExtractPlugin.loader,
        'css-loader',
                // 添加
        'postcss-loader',
        ]
    }
    ]
},

同时需要新建一个postcss.config.js文件

src中的css

生成的css

压缩css，js

• 压缩css
  插件 optimize-css-assets-webpack-plugin

  
  
• 压缩js
  插件uglifyjs-webpack-plugin

• 修改配置文件

module.exports = {
// 添加这个部分
 optimization:{
    minimizer:[
    new UglifyJsPlugin({
        cache:ture,
        parallel:true,
        sourceMap:true
    }),
    new  OptimizeCss() 
    ]
 },

bundle.js
style.css

转化ES6语法

我们需要将ES6转化成ES5语法
所有插件可以在babel官网自助查询https://babeljs.io/
插件：babel-loader @babel/core @babel/preset-env

• 修改配置，添加语法

 module: {
  rules: [
  // 用于转换es6语法
  {
    test:/\.js$/,
    use:{
      loader:'babel-loader',
      options:{
        presets:[
          '@babel/preset-env'
        ]
      }
    }
  },

• 对于class类的语法，还是不会支持，需要插件
  @babel/plugin-proposal-class-properties

• 对于装饰器@，需要插件
  npm install --save-dev @babel/plugin-proposal-decorators
  修改配置

module: {
  rules: [
  // 用于转换es6语法
  {
    test:/\.js$/,
    use:{
      loader:'babel-loader',
      options:{
        presets:[
        '@babel/preset-env'
        ],
        // 支持ES7装饰器，class语法
        plugins:[
        ["@babel/plugin-proposal-decorators", { "legacy": true }],
        ["@babel/plugin-proposal-class-properties", { "loose" : true }]
        ]
      }
    }
  },

• 对于generator，include语法，需要插件@babel/runtime
  npm install --save @babel/runtime
  npm install --save-dev @babel/plugin-transform-runtime

  plugins:[
        ["@babel/plugin-proposal-decorators", { "legacy": true }],
        ["@babel/plugin-proposal-class-properties", { "loose" : true }],
      "@babel/plugin-transform-runtime"
        ]

校验js代码是否符合规范ESLint

npm install --save-dev eslint eslint-loader

module: {
  rules: [ //loader默认是从右向左，从下到上执行。
  // 用户处理js语法校验
  {
    test:/\.js$/,
    use:{
      loader:'eslint-loader',
      options:{
        enforce:'pre' //previous post
      }
    }
  },

在官网进行配置https://eslint.org/demo/，并下载eslintrc.json放到项目中，重命名为.eslintrc.json

image.png

webpack打包图片

• 在js中创建图片引用
  npm install --save-dev file-loader
  配置图片相应规则

 // 图片相关规则
   {
    test:/\.(png|jpg|gif)$/,
    use:'file-loader'
   }

js中创建图片并引用

// 打包图片
// 1.在js中创建图片并引用
// file-loader默认会在内部生成一张图片到build目录下，并且把生成的图片名字返回回来
let image=new Image();
console.log(logo);
image.src=logo;
document.body.appendChild(image);

• 在css中使用图片
  直接使用即可

body{
    background: url('./logo.png') repeat;
}

js中引入样式

import './index.css'

• 在html里面直接引入图片
  插件：html-withimg-loader
  npm install --save-dev html-withimg-loader
  配置

// 在html中能使用图片
   {
    test:/\.html$/,
    use:'html-withimg-loader'
   }

• 优化file-loader
  一般使用url-loader
  npm install --save-dev url-loader
  对图片配置进行修改

// 图片相关规则
   {
    test:/\.(png|jpg|gif)$/,
    //use:'file-loader'
    // 做一个限制，当图片小于多少时，使用base64来转化，
    // 否则使用file-loader产生真实图片
    use:{
      loader:'url-loader',
      options:{
        limit:200*1024
      }
    }
   },

打包资源分类

我们希望图片去一个目录，css去一个目录
在options中添加outputPath属性。

// 图片相关规则
   {
    test:/\.(png|jpg|gif)$/,
    //use:'file-loader'
    // 做一个限制，当图片小于多少时，使用base64来转化，
    // 否则使用file-loader产生真实图片
    use:{
      loader:'url-loader',
      options:{
        //limit:200*1024,
        limit:1,
        outputPath:'/img/',
        // 也可以根据情况单独添加
        //publicPath:'http://ww.123.cn'
      }
    }
   },

 // 将css抽象到dist/css
  new MiniCssExtractPlugin({
       // 改文件路径
    filename:'css/style.css'
  })
  ],

结果

同时我们可以设置所有资源的根目录，publicPath，用于CDN加速，这里我们只对图片进行了加速，可以看到结果。

图片前面加了前缀