webpack4.x的学习

webpack的基本使用

  1. 安装 webpack , 可以在终端 webpack --version 看到版本号，说明安装成功

 　　cnpm i webpack webpack-cli -g
 　　npm i webpack webpack-cli -g

  1. webpack4.0 是约定大于配置,我们约定了 以 ./src/index.js 当成入口,以 ./dist/main.js 当成出口

  2. 在终端 执行 webpack 命令 就可以将 你的入口文件(./src/index.js),打包到 出口文件(./dist/main.js)

webpack 的基本配置

  1. 创建 webpack.config.js 文件

  2. 在文件书写代码

　　let path = require('path')
　　module.exports = {
  　　entry: path.join(__dirname, '[你希望入口的文件]'),
  　　output: {
    　　path: path.join(__dirname, './dist'),
    　　filename: '[你希望的出口文件名]'
  　　},
  　　mode: 'development'   //  代码压缩不压缩  development(不压缩) ,production(压缩)
　　}

  1. 执行 webpack 就可以打包了

webpack-dev-server 的使用

  1. 每一次修改了代码都需要从新打包编译，很麻烦，所以有一个webpack-dev-server的插件来解决这个问题

  2. 第一步安装插件


    cnpm i webpack-dev-server -D

  3. 由于webpack-dev-server 依赖了 webpack所以需要本地安装


    cnpm i webpack webpack-cli -D

  4. 在 package.json 文件配置 webpack-dev-ser


    "scripts": {
        "test": "webpack-dev-server"
      },  

  5. 配置 webpack-dev-server的参数

    • --contentBase src(以自己希望的路径打开浏览器)

    • --port 3001 (以自己希望的端口打开浏览器)

    • --hot (热刷新 热重载)

    • --open Chrome (默认打开指定的浏览器)


      "scripts": {
        "serve": "webpack-dev-server --contentBase src --port 3001 --hot --open Chrome"
      },

    ​

html-webpack-plugin 的使用

  1. 下载插件


    cnpm i html-webpack-plugin -D

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

    1. let HtmlWebpackPlugin = require('html-webpack-plugin')
    ​
    2. 在plugins选项中配置
     plugins: [
        new HtmlWebpackPlugin({
          template: path.join(__dirname, './src/index.html'),
          filename: 'index.html'
        })
      ]

  3. 重新启动任务

loader的使用

  • webpack只能够处理js文件，其他类型的文件都需要借助loader

  • css 文件 需要借助 style-loader css-loader


    1. 先下载cnpm i style-loader css-loader -D
    2. 在 webpack.config.js配置
     module: {
        rules: [
          { test: /\.css$/, use: ['style-loader', 'css-loader'] }
        ]
      }

  • less 文件 需要借助 style-loader css-loader less-loader less

  • scss 文件 需要借助 style-loader css-loader sass-loader node-sass


     module: {
        rules: [
          { test: /\.css$/, use: ['style-loader', 'css-loader'] },
          { test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] },
          { test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'] }
        ]
      }

  • 图片和 字体图标需要借助 url-loader file-loader 处理


      module: {
        rules: [
          { test: /\.(jpg|png|gif|jpeg)$/, use: 'url-loader?limit=44998&name=[hash:8]-[name].[ext]' },
          { test: /\.(eot|svg|ttf|woff|woff2)$/, use: 'url-loader' }
        ]
      }

  • webpack 只能够处理部分 js 高级语法， 所以将高级js语法转换成webpack能够处理语法的这件事， 要交给 babel 来处理，可以理解为 babel 是一个翻译公司， 将高级js语法，翻译成webpack能处理的js语法，公司的翻译工作要交给翻译小姐姐，也就是 目前 需要借助 babel-loader @babel/core @babel/preset-env 这几个插件来处理


    1. 在webpack.config.js 文件配置
     module: {
        rules: [
          { test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ }
        ]
      }
    2. 在根目录创建 .babelrc 文件
    {
      "presets": [
        "@babel/preset-env"
      ],
      "plugins": [
        
      ]
    }
    3. 重新启动项目就可以了

    • vue结合webpack的项目里创建组件 普遍使用 .vue 文件来创建，而.vue文件 webpack又处理不了，所以此时，需要借助 vue-loader,而vue-loader依赖 vue-template-compiler


    1. 安装对应的loader 处理 .vue文件
    cnpm i vue-loader vue-template-compiler -D
    2. 配置文件
    module: {
        rules: [
          { test: /\.vue$/, use: 'vue-loader' }
        ]
     }
     3. 在webpack.config.js 文件顶部导入   `let VueLoaderPlugin = require('vue-loader/lib/plugin.js')`
     4. 配置文件
      plugins: [
        new VueLoaderPlugin()
      ]
     5. 重启项目

    ​