webpack-4.x的使用

作者: duans_ | 来源:发表于2019-01-15 15:46 被阅读130次

webpack-4.x

安装

npm i webpack -g: 全局安装webapck

基本使用

不使用配置文件, 通过在命令后传递参数的方式指定配置项. []表示可选参数

webpack默认是以./src/index.js作为入口文件, ./dist/main.js作为出口文件
- 如果你的项目结构和上面一样, 直接运行命令 webpack 进行打包
如果需要指定入口文件和出口文件,使用以下命令行:
- webpack <entry> -o <output>
- webpack [--entry] <入口文件> --output <出口文件>

使用配置文件

当配置项比较多的时候, 直接在命令中加入参数不方便, 所以可以使用一个单独的配置文件, 来存储一些配置项
配置文件默认名称:webpack.config.js
最简单的配置文件

const path = require('path');
module.exports = {
  entry: './src/main.js',
  output: {
      //必须使用绝对路径
      path: path.resolve(__dirname, 'dist'),
      filename: 'bundle.js'
  }
};

打包直接使用命令webpack
如果你的配置文件名称不是webpack.config.js, 那么可以通过命令webpack --config <配置文件>执行打包

`webpack-dev-server`

webpack-dev-server是node平台下的一个工具软件
作用: 相当于一个开发服务器,可以监听文件的改变, 自动进行打包, 并且可以启动一个开发服务器
安装: npm i webpack-dev-server -D, 一般不需要全局安装, 本地安装的工具, 默认不能直接通过命令行来执行
依赖:
- webpack-dev-server依赖webpack, 所以一般还需要在本地安装webpack, 即使全局已经安装过webpack工具
- webapck-dev-server还依赖webpack-cli,所以还必须通过命令 npm i -D webpack-cli 本地安装webpack-cli
注意: 通过webpack-dev-server打包好的bundle.js文件并没有写入磁盘, 而是直接存储在内存中, 目的是提升效率, 因为需要频繁的打包, 磁盘读写速度太慢, 所以可以通过http://localhost:8080/bundle.js访问到
运行:
- 使用配置文件: webpack-dev-server --config webpack.config.js
  - 自定义端口并且自动打开浏览器: webpack-dev-server --config webpack.config.js --port 3000 --open
- 不使用配置文件: webpack-dev-server ./src/main.js -o ./dist/bundle.js --mode development
- --open: 自动打开浏览器, 可以指定打开某一个浏览器, 比如--open Chrome
- --port: 指定端口, 默认为8080
- --mode: 指定开发模式,可选值: production生产环境, development开发环境
- --progress: --progress=true,显示打包进度
- --https: https=true,启用https协议, 一般浏览器会阻止, 因为缺少安全证书

webpack-dev-server通过配置文件指定参数

webpack.config.js

const path = require('path');
// 热更新第二步
const webpack=require('webpack');
module.exports = {
  mode: 'development',          //可选参数`development`开发模式,`production`生产模式
  entry: path.resolve(__dirname, './src/main.js'),
  output: {
    // 必须使用绝对路径
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  devServer:{
    open:true,          //自动打开默认浏览器    
    port:3000,          //指定端口    
    contentBase:'src',  //指定根目录
    hot:true,           //热更新第一步
    progress:true       //显示打包进度
  },
  plugins:[
    // 热更新第三步
    new webpack.HotModuleReplacementPlugin()
  ]
};

package.json

dev脚本是直接指定webpack-dev-server的参数, 推荐使用此种方式
dev1是通过配置文件指定webpack-dev-server的参数, 相对麻烦一点

{
  "name": "wp-study",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev":"webpack-dev-server --config webpack.config.js --port 3000 --open --hot",
    "dev1":"webpack-dev-server --config webpack.config.js",
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "jquery": "^3.3.1"
  },
  "devDependencies": {
    "webpack": "^4.28.4",
    "webpack-cli": "^3.2.1",
    "webpack-dev-server": "^3.1.14"
  }
}

html-webpack-plugin

作用:
- 根据我们提供的index.html页面在内存中自动生成html文件
- 将打包好的bundle.js文件自动引入内存中html页面
安装: npm i html-webpack-plugin -D
修改webpack.config.js文件

const path = require('path');
// 引入html-webpack-plugin
const htmlWebpackPlugin=require('html-webpack-plugin');
// 热更新第二步
const webpack=require('webpack');

module.exports = {
  mode: 'development',
  entry: path.resolve(__dirname, './src/main.js'),
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  devServer:{
    open:true,          //自动打开浏览器
    port:3000,          //指定端口
    contentBase:'src',  //指定服务器名根目录
    hot:true    //热更新第一步
  },
  plugins:[
    // 热更新第三步
    new webpack.HotModuleReplacementPlugin(),
    new htmlWebpackPlugin({
        template:path.join(__dirname,'src/index.html'), //模板文件的目录+文件名
        filename:'home.html'     //内存中的文件名
    })
  ]
};

打包css文件

webpack默认只能打包js文件, 打包css文件需要借助第三当的loader加载器
所需loader:style-loader css-loader
安装: npm i style-loader css-loader -D
配置webpack.config.js

module.exports = {
    module:{
        rules:[
        // css打包配置
        {test:/\.css$/,use:['style-loader','css-loader']}
        ]
    }
};

main.js中导入style.css: import './css/style.css';

打包less

所需loader: less-loader `
安装loader: npm i less-loader -D
依赖:less, 所以还必须通过npm i less -D安装less
修改配置文件webpack.config.js:

module.exports = {
    module:{
        rules:[
        // css打包配置
        {test:/\.css$/,use:['style-loader','css-loader']},
        // less打包配置  
        {test:'\.less$',use:['style-loader','css-loader','less-loader']}
        ]
    }
}

打包scss

所需loader: sass-loader
安装loader: npm i sass-loader -D
依赖: node-sass, 所以必须通过cnpm i node-sass -D安装node-sass
修改配置文件webpack.config.js

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

打包图片

所需loader: url-loader
安装loader: npm i url-loader -D
依赖: file-loader, 所以必须通过cnpm i file-loader -D安装file-loader
修改配置文件webpack.config.js

module.exports = {
    module:{
        rules:[
            {
                test:/\.(jpg|png|gif|pmb|jpeg)$/,
                use:'url-loader?limit=2048&name=[hash:8]-[name].[ext]'
            }
        ]
    }
}

打包字体文件

所需loader: url-loader
安装loader: npm i url-loader -D
依赖: file-loader, 所以必须通过cnpm i file-loader -D安装file-loader
修改配置文件webpack.config.js

module.exports = {
    module:{
        rules:[
             {
                test:/\.(ttf|eot|svg|woff|woff2|otf)$/, 
                use: 'url-loader'
            }
        ]
    }
}

下载bootstrap

bootstrap-4.x核心包中并不包含字体图标

下载3.x版本: npm i bootstrap@3 -S

babel-7.x

作用: 将部分浏览器不能识别的es6的高级语法转换成浏览器成够解析的js代码
所需loader: babel-loader
安装 loader: npm i babel-loader -D
所需依赖: @babel/core @babel/perset-env @babel/runtime @babel/plugin-transform-runtime
安装依赖:

npm i @babel/core @babel/perset-env @babel/runtime  @babel/plugin-transform-runtime @babel/runtime -D

修改配置文件webpack.config.js

module.exports = {
    module:{
        rules:[
              {
                test:/\.js$/,
                use:'babel-loader',
                exclude:'/node_modules/'   //不需要转换的js文件
              }
        ]
    }
}

创建babel配置文件.babelrc

{
    "presets": ["@babel/preset-env"],
    "plugins": [
            "@babel/plugin-transform-runtime","@babel/plugin-proposal-class-properties","@babel/plugin-transform-classes"
    ]
}

移除webpack打包严格模式

注意:
- babel-7.x的包名叫做@babel/plugin-transform-strict-mode
- babel-6.x的包名叫做babel-plugin-transform-remove-strict-mode
使用babel插件@babel/plugin-transform-strict-mode
- 装包: cnpm i @babel/plugin-transform-strict-mode -D
- 配置babel配置文件.babelrc
```
{
"plugins": ["@babel/plugin-transform-strict-mode"]
}
```
参考文档: @babel/plugin-transform-strict-mode

babel忽略对第三方js转码

修改.babelrc,添加如下配置项

{
    "ignore": [
        "./src/lib/mui/js/*.js"
    ]
}

常见babel插件

@babel/plugin-proposal-class-properties: 解析es6类class中的属性
@babel/plugin-transform-classes: 解析es中的class
@babel/plugin-transform-arrow-functions: 解析es6中的箭头函数
@babel/plugin-transform-block-scoping: 解析es6中的块级作用域

使用webpack构建vue项目

装包

npm i vue -S

安装loader和依赖

npm i vue-loader vue-template-compiler -D

导入

import Vue from 'vue'

默认导入的vue包不是vue.js, 而是vue-runtime.js这个包不能直接使用

解决方案一: import Vue from '../node_modules/vue/dist/vue.js'
解决方案二: 修改webpack.config.js ,添加如下配置

resolve:{
    alias:{
        "vue$":"vue/dist/vue.js"
    }
}

安装`vue-loader`

npm i vue-loader -D
引入VueLoaderPlugin: 修改webpacke配置文件

/* 导入VueLoaderPlugin*/
const {VueLoaderPlugin}=require('vue-loader');
/*在plugin节点加入配置*/
plugins:[
    // 热更新第三步
    new webpack.HotModuleReplacementPlugin(),
    new htmlWebpackPlugin({
        template:path.join(__dirname,'src/index.html'), //模板文件的目录+文件名
        filename:'index.html'     //内存中的文件名
    }),
    // vue-loader插件
    new VueLoaderPlugin()
]

`main.js`

/* 导入vue核心包vue.js*/
import Vue from 'vue'

/*导入login组件*/
import login from 'login.vue'

var vm=new Vue({
    el:'#app',
    data:{
        msg:'Hello Vue.js'
    },
    /* 调用render方法渲染login组件 */ 
    /* 简写: render:c=>c(login)*/ 
    render(c){
        return c(login);
    }
});

集成`vue-router` 路由组件

装包: npm i vue-router -S
导入: import VueRouter from 'vue-router'
安装: Vue.use(VueRouter)

使用mint-ui

装包: npm i min-ui -S
导包
- 全部导入:
  - 第一步: 导入全部组件 import mint from 'mint-ui'
  - 第二步: 导入样式文件 import 'mint-ui/lib/style.css'
  - 第三步: 注册组件Vue.use(mint)
- 按需导入:
  - 第一步: 导入组件 import {Button} from 'mint-ui'
  - 第二步: 注册组件 Vue.component(Button.name,Button)
  - 配置babel
    - 安装babel-plugin-component插件
    - 修改babel配置文件.babelrc(注意: 此处是babel-7.x的配置文件)
```
{
    "presets": [
        "@babel/preset-env"
    ],
    "plugins": [
        "@babel/plugin-transform-runtime",
        "@babel/plugin-proposal-class-properties",
        "@babel/plugin-transform-classes",
        [
            "component",
            {
                "libraryName": "mint-ui",
                "style": true
            }
        ]
    ]
}
```

使用webpack-dev-server进行跨域请求

修改`webpack.config.js`

devServer:{
    proxy: {
      '/api': {
          target: 'http://www.duans.top/freeApi',
          /*pathRewrite
          如果不加此配置, 最终请求url为http://www.duans.top/freeApi/api/xxx.php;
          可能真实的url地址为:http://www.duans.top/freeApi/xxx.php
          */ 
          pathRewrite: {'^/api' : ''},  
          changeOrigin: true,           // target是域名的话，需要这个参数，
          secure: false                 // false表示可以请求运行在HTTPS协议下的数据接口
      },
     '/api2/':{
         ...
     }

    }
  },

参考文档

官方文档
 第三方文档

附件

最终配置

webpack配置文件`webpack.config.js`

const path = require('path');
// 引入html-webpack-plugin
const htmlWebpackPlugin=require('html-webpack-plugin');
// 热更新第二步
const webpack=require('webpack');

// vue-loader插件
const { VueLoaderPlugin } = require('vue-loader');

module.exports = {
  mode: 'development',    //production
  entry: path.resolve(__dirname, './src/main.js'),
  // entry:["@babel/polyfill",path.resolve(__dirname, './src/main.js')],
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  // webpack-dev-server的配置节点
  devServer:{
    open:true,          //自动打开浏览器
    port:3000,          //指定端口
    contentBase:'src',  //指定服务器名根目录
    hot:true,    //热更新第一步
    progress:false,  //显示打包进度
    quiet:false,
    proxy: {
      '/api': {
          target: 'http://www.duans.top/freeApi',
          pathRewrite: {'^/api' : ''},
          changeOrigin: true,     // target是域名的话，需要这个参数，
          secure: false
      }
    }
  },
  plugins:[
    // 热更新第三步
    new webpack.HotModuleReplacementPlugin(),
    new htmlWebpackPlugin({
        template:path.join(__dirname,'src/index.html'), //模板文件的目录+文件名
        filename:'index.html'     //内存中的文件名
    }),
    // vue-loader插件
    new VueLoaderPlugin()

  ],
  module:{
    rules:[
      // css打包配置
      {test:/\.css$/,use:['style-loader','css-loader']},
      // less配置
      {test:/\.less$/,use:['style-loader','css-loader','less-loader']},
      //打包scss
      {test:/\.scss$/,use:['style-loader','css-loader','sass-loader']},
      //打包图片
      {
        test:/\.(png|gif|jpg|jpeg|bmp)$/,
        use:'url-loader?limit=2048U&name=[hash:8]-[name].[ext]'
      },
      //打包字体文件
      {
        test:/\.(ttf|eot|svg|woff|woff2|otf)$/, 
        use: 'url-loader'
      },
      //babel配置
      {
        test:/\.js$/,
        use:'babel-loader',
        exclude:['/node_modules/']   //不需要转换的js文件
      },
      //打包.vue
      {
        test:/\.vue$/,
        use:'vue-loader'
      }
    ]
  },
  resolve:{
    alias:{
      "vue$":"vue/dist/vue.js"
    }
  }
 
};

babel配置文件`.babelrc`

{
    "presets": [
        "@babel/preset-env"
    ],
    "plugins": [
        "@babel/plugin-transform-runtime",
        "@babel/plugin-proposal-class-properties",
        "@babel/plugin-transform-classes",
        "@babel/plugin-transform-strict-mode",
        [
            "component",
            {
                "libraryName": "mint-ui",
                "style": true
            }
        ]
    ],
    "ignore":[
        "./src/lib/mui/js/*.js"
    ]
}

package.json

{
  "name": "wp-study",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack-dev-server  --contentBase src --open --hot",
    "build": "webpack --config webpack.config.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "bootstrap": "^3.1.1",
    "jquery": "^3.3.1",
    "mint-ui": "^2.2.13",
    "moment": "^2.23.0",
    "popper.js": "^1.14.6",
    "vue": "^2.5.22",
    "vue-preview": "^1.1.3",
    "vue-resource": "^1.5.1",
    "vue-router": "^3.0.2"
  },
  "devDependencies": {
    "@babel/core": "^7.2.2",
    "@babel/plugin-proposal-class-properties": "^7.2.3",
    "@babel/plugin-transform-classes": "^7.2.2",
    "@babel/plugin-transform-runtime": "^7.2.0",
    "@babel/plugin-transform-strict-mode": "^7.2.0",
    "@babel/preset-env": "^7.2.3",
    "@babel/runtime": "^7.2.0",
    "babel-loader": "^8.0.5",
    "babel-plugin-component": "^1.1.1",
    "css-loader": "^2.1.0",
    "file-loader": "^3.0.1",
    "html-webpack-plugin": "^3.2.0",
    "less": "^3.9.0",
    "less-loader": "^4.1.0",
    "node-sass": "^4.11.0",
    "sass-loader": "^7.1.0",
    "style-loader": "^0.23.1",
    "url-loader": "^1.1.2",
    "vue-loader": "^15.5.1",
    "vue-template-compiler": "^2.5.22",
    "webpack": "^4.28.4",
    "webpack-cli": "^3.2.1",
    "webpack-dev-server": "^3.1.14"
  }
}

常见错误及解决方案

问题一

webpack-cannot-find-module.png

解决方案: 删除node_modules文件夹, 重新运行命令npm i进行装包

问题二

package.json.png

报错原因: package.json文件中写了注释
- .json的文件中是不能书写注释的

问题三

babel-es6-class-property.png

解决方案: 通过npm i @babel/plugin-proposal-class-properties -D安装babel插件

问题四

@babel-runtime.png

报错原因: babel-7.x需要安装@babel-runtime依赖包
解决方案: 通过npm i @babel-runtime -D安装babel插件

问题五

need-loader.png

报错原因: 缺少特殊文件的处理loader
解决方案: 安装并配置对应的loader加载器

问题六

VueLoaderPlugin.png

报错原因: webpack-4.x或者vue-loader^15.5.1需要在配置文件中添加VueLoaderPlugin插件
解决方案: 修改webpack.config.js

/* 第一步 */
const VueLoaderPlugin=require('vue-loader');
/* 第二步: 在plugin配置节点中增加如下配置*/
plugins:[
    new VueLoaderPlugin()
]

问题七

error-port-used.png

报错原因: 端口被占用
解决方案:
- 修改端口
- 关闭占用端口的进程

杂项

导入导出语法

es6中

导入

import:
- import Vue from 'vue'

导出

export default:
- 在一个模块中, 只能使用一次, 只允许向外暴露一次成员;
- 导入时可以使用任意变量来接收
export:
- 按需导出;
- 在一个模块中可以使用多次, 向外暴露多次;
- 导入时需要使用{}来接收, 并且只能使用导出的时候使用的变量名进行接收

查看项目所安装依赖包的具体版本

直接打开package.json文件即可查看

npm查看指定软件包的版本

npm view jquery versions: 查看所有版本
npm view jquery version: 查看已安装的版本
npm jquery info: 查看最新版本

同时安装多个包

使用空格分割:npm style-loadder css-loader -D

删除包

npm un jquery -S

npm脚本

package.json

{
  "name": "webpack-study",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "mysql":"mysql -hlocalhost -uroot -proot"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
  }
}

在package.json文件中的script对象中, 可以自定义一些执行脚本, 通过npm run <自定义脚本名称> 来运行, 从而完成一些系统操作; 比如: 通过npm run mysql连接mysql服务器, 前提是你的操作系统安装了mysql数据库软件, 并且启动了mysql服务

webpack-4.x的使用

webpack-4.x

安装

基本使用

使用配置文件

webpack-dev-server

webpack-dev-server通过配置文件指定参数

package.json

html-webpack-plugin

打包css文件

打包less

打包scss

打包图片

打包字体文件

下载bootstrap

babel-7.x

移除webpack打包严格模式

babel忽略对第三方js转码

常见babel插件

使用webpack构建vue项目

装包

安装loader和依赖

导入

安装vue-loader

main.js

集成vue-router 路由组件

使用mint-ui

使用webpack-dev-server进行跨域请求

修改webpack.config.js

参考文档

附件

最终配置

webpack配置文件webpack.config.js

babel配置文件.babelrc

package.json

常见错误及解决方案

问题一

问题二

问题三

问题四

问题五

问题六

问题七

杂项

导入导出语法

es6中

导入

导出

查看项目所安装依赖包的具体版本

npm查看指定软件包的版本

同时安装多个包

删除包

npm脚本

在线文档

webpack

webpack官网

webpack中文文档

wepack-dev-server相关文档

babel

babel-7.x在线文档

babel-7.x官方英文文档

babel-7x常见问题

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

`webpack-dev-server`

安装`vue-loader`

`main.js`

集成`vue-router` 路由组件

修改`webpack.config.js`

webpack配置文件`webpack.config.js`

babel配置文件`.babelrc`