webpack--小王学习笔记

webpack

webpack官网

什么是webpack

webpack 是一个现代 JavaScript 应用程序的静态模块打包器，是一个前端项目构建工具，是基于Nood.js开发出来的。

webpack安装

1. 全局安装：npm i webpack -g
2. 项目依赖：npm i webpack --save-dev

webpack基本使用

1. 创建一个文件夹：webpack\test
2. 通过 npm init -y 初始化一个package.json文件

F:\webpack\test>npm init -y
Wrote to F:\webpack\test\package.json:
{
  "name": "test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "dependencies": {
    "webpack": "^4.42.1"
  },
  "devDependencies": {},
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

3. 打包: webpack 要打包的文件路径 打包好的输出文件的路径
4. 新建一个 webpack.config.js 配置文件

const path = require('path');

module.exports = {
  entry: './src/main.js',//入口
  output: {//出口
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  mode:'development'//设置mode
};

5. 自动打包：cnpm i webpack-dev-server -D

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

6. 插件：​cnpm i html-webpack-plugin -D（HTML文件的创建）

//webpack.config.js
const path=require('path')
//启用热更新 第2步 
const webpack=require('webpack')
//导入在内存中 生成HTML 页面中的插件
const htmlWebpackPlugin=require('html-webpack-plugin')
//这个插件的作用：1 自动在内存中根据指定页面生成一个内存的页面; 2 自动把打包好的bundle.js 追加到页面中去
module.exports = {
  entry: './src/main.js',//入口
  output: {//出口
      path: path.resolve(__dirname, 'dist'),
      filename: 'bundle.js'
  },
  mode:'development',//设置mode
  devServer:{//这是配置dev-server命令参数的第二种形式相对来说麻烦一些
       //--open --port 3000 --contentBase src --hot
       //打开浏览器 打开的端口号 默认打开的目录 热更新
       open:true,//自动打开浏览器
       port:3000,//设置启动时候的运行端口
       contentBase:'src',//指定托管的根目录
       hot:true//启动热更新   第1步
  },
  plugins:[//配置插件的节点
       new webpack.HotModuleReplacementPlugin(),//new 一个热更新的模块对象，启用热更新的第3部
       new htmlWebpackPlugin({//创建一个在内存中生成的HTML页面插件
           template:path.join(__dirname,'./src/index.html'),//指定模板页面将来会根据指定的页面路径去生成内存中的页面
           filename:'index.html'//指定生成的页面的名称
       })
  ],
};

webpack中的两个环境

1. 开发环境 :开发期间的环境，在项目没有上线之前使用，代码不会压缩

 "dev"："webpack ./src/js/main.js --output ./dist/bundle.js --mode development"

2. 生产环境 :项目上线的时候使用，将代码打包压缩

"pro"："webpack ./src/js/main.js --output ./dist/bundle.js --mode production"

常用loader

安装

打包处理文件	安装命令
.css	cnpm i style-loader css-loader -D
.less	cnpm i less-loader less -D
.scss	cnpm i scss-loader node-sass -D
图片格式	cnpm i url-loader file-loader -D
.js	cnpm i babel-core babel-loader babel-plugin-transform-runtime -D cnpm i babel-preset-env babel-preset-stage-0 -D
.vue	cnpm i vue-loader vue-template-compiler -D

模块配置

module:{//这个节点用于配置所有的第三方 loader模块   加载器
        rules:[//所有第三方模块的匹配规则
            {test:/\.css$/,use:['style-loader','css-loader']},//配置处理css文件的第三方loader规则
            {test:/\.less$/,use:['style-loader','css-loader','less-loader']},//配置处理less文件的第三方loader规则
            {test:/\.scss$/,use:['style-loader','css-loader','sass-loader']},//配置处理scss文件的第三方loader规则
            {test:/\.(jpg|png|gif|bmp|jpeg)$/,use:'url-loader?limit=7634&name=[hash:8]-[name].[ext]'},//配置处理图片路径文件的第三方loader规则
            //limit给定的值，是图片大小单位是byte，
            // 如果我们引用的图片大于或等于给定的limit值，则不会转为base64格式的字符串
            // 如果图片小于给定的limit值则会被转为base64的字符串
            {test:/\.js$/,use:'babel-loader',exclude:/node_modules/},//配置Babel来转换高级es语法
            {test:/\.vue$/,use:'vue-loader'},//配置vue文件的loader
        ]

    },

.新建babelrc 配置文件

{
    "presets": ["env","stage-0"],
    "plugins": ["transform-runtime"]
}