webpack4.x的学习 - 王潇fly

webpack4.x的学习

webpack4.x的学习

webpack的基本使用

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

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

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

3. 在终端 执行 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(压缩)
}

3. 执行 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. 重启项目

  ​

发表于 2019-02-28 12:59 王潇fly 阅读(61) 评论(0) 编辑收藏举报