配置webpack

作者: WhiteStruggle | 来源:发表于2020-05-22 16:28 被阅读0次

一、webpack的安装和基础配置 ------ 2020-07
开始使用webpack
二 webpack 配置文件
Vue.config.js各个属性说明
webpack noParse参数
html-webpack-plugin
webpack 模块加载原理及打包文件分析 (一)
项目布局
webpack起步二
2018-03-21

ES6文件引入

抛出

var App = {
    template:`
        <div>
            <b>入口文件</b>
        </div>
    `,
}

//导出变量
//声明并导出
export var num1 = 2;//作为一整个对象key导出
//声明再导出
var num2 = 3;
export {num2};

//导出函数
export function add(x,y){
    return x+y;
};

//导出组件
export default App;

引入

// es6,moudle的模块引入Vue
import Vue from "../vue.js";

//引入变量和函数
import {num1,num2,add} from "./app.js";

//引入组件
import App from "./app.js";

//引入css,需要配置loader
import  "./Css/index.css";

//引入图片
import Image from "./"


console.log(num1);//2
console.log(num2);//3
console.log(add(3,5));//8

new Vue({
    el : "#app",
    components:{
        App,
    },
    template:`
        <App>{{num1}}{{num2}}</App>
    `,
});

注意

i 相当于 install

un 相当于 uninstall

-D 相当于 --save-dev

-g 相当于 --global

-S 相当于 --save

配置

选择模式告诉webpack相应地使用其内置的优化

mode : "",

可取值：
1. "production"   —— 为生产构建启用许多优化
2. "development"  —— 启用了有用的开发工具
3. "none"  —— 没有默认值

主要配置：

// 导入处理路径的模块
var path = require('path');
// 导入自动生成HTMl文件的插件
var htmlWebpackPlugin = require('html-webpack-plugin');
// vue-loader 插件
const VueLoaderPlugin = require('vue-loader/lib/plugin');

module.exports = {
    //入口，可以有多个
      entry: './src/index.js',//应用程序开始执行
      output: { // 配置输出选项
        path: path.resolve(__dirname, 'dist'), // 配置输出的路径
        filename: 'bundle.js' // 配置输出的文件名
    },
    //声明模块，包含各个loader
    module: { // 用来配置第三方loader模块的  
        rules: [ // 文件的匹配规则 
            { 
              test: /\.css$/, 
              use: ['style-loader', 'css-loader'] 
            },//处理css文件的规则
            { 
              test: /\.(png|jpg|gif|jpeg|nmp|jfif)$/, 
              use: 'url-loader?limit=600000' 
            },//处理图片资源
            { 
              test: /\.less$/, 
              use: ['style-loader', 'css-loader', 'less-loader'] 
            },//处理less文件
            { 
              test: /\.js$/, 
              use: 'babel-loader', 
              exclude: /node_modules/ //排除此文件，提高效率
            },//处理js高级语法，es6或者更高版本
            {
              test:/\.vue$/,
              use:'vue-loader'
            },//处理vue文件
        ]
    },
    plugins:[ // 添加plugins节点配置插件
        new htmlWebpackPlugin({
            template:path.resolve(__dirname, 'demo/index.html'),//模板路径
            filename:'index.html'//自动生成的HTML文件的名称
        }),
        // 请确保引入这个插件
        new VueLoaderPlugin()
    ],

    devServer: {//配置webpack-dev-server
      contentBase: path.join(__dirname, "dist"),//指定了服务器资源的根目录，如果不写入contentBase的值，那么contentBase默认是项目的目录。
      port: 8989,//设置服务器的端口号
      open:true,//打开配置的 http://localhost:8989
      // host: '0.0.0.0',//设置的是服务器的主机号,localhost:8989等于0.0.0.0:8989
      inline:true,//自动刷新页面
      hot:true,//热更新，不需要刷新页面就可以更新css文件
      historyApiFallback:{//这个配置属性是用来应对返回404页面时定向到特定页面用的,
         rewrites:[//需要先在dist目录下新建一个404.html
            {from:/./,to:'/404.html'}
         ]
        }
      }

  // watch:true,//文件监听改动，自动产出build.js
};

引入css文件

下载css文件loader依赖

cnpm i style-loader css-loader --save-dev

设置配置文件，引入loader

    //声明模块，包含各个loader
    module: { // 用来配置第三方loader模块的  
        rules: [ // 文件的匹配规则 
            { 
              test: /\.css$/, 
              use: ['style-loader', 'css-loader'] 
            }//处理css文件的规则
        ]
    }

注意：use表示使用哪些模块来处理test所匹配到的文件；use中相关loader模块的调用顺序是从后向前调用的；
将css文件引入到入口文件

import  "./Css/index.css";

打包即可

引入图片

在vue，html，css文件中，会引入图片，但是打包并不能识别这些文件，不会显示图片，也不会报错，一次需要进行一定的配置

下载资源文件loader依赖

cnpm i url-loader file-loader --save-dev

配置loader

{ test: /\.(png|jpg|gif)$/, use: 'url-loader' }

可以通过limit指定进行base64编码的图片大小；图片的字节数小于limit指定的字节（byte）的图片才会进行base64编码,大于则不显示：

{ 
    test: /\.(png|jpg|gif|jpeg|nmp|jfif)$/, 
    use: 'url-loader?limit=600000' 
},//处理图片资源

引入图片文件

import Image from "../Img/game.png";

引入less

一个简单的文件

@imgpath:"../Img/10.jfif";
body{
    background-image:url( /@imgPath );
}

下载less文件loader依赖

cnpm i  less-loader --save-dev

配置loader

{ 
    test: /\.less$/, 
    use: ['style-loader', 'css-loader', 'less-loader'] 
},//处理less文件

打包，但是会报错，lessloader依赖于less

npm i less -D
//下载less
//-D 等同于 --save-dev

编译成功会产生一个图片文件

插件

输出HTML

下载一个插件，安装到开发依赖

cnpm i html-webpack-plugin --save-dev

配置插件

导入插件：（放在module.exports外部）

// 导入自动生成HTMl文件的插件
var htmlWebpackPlugin = require('html-webpack-plugin');

配置此插件

    plugins:[ // 添加plugins节点配置插件
        new htmlWebpackPlugin({
            template:path.resolve(__dirname, 'src/index.html'),//模板路径
            filename:'index.html'//自动生成的HTML文件的名称
        })
    ]

注意修改模板路径

打包，生成一个index.html，拥有模板文件的内容，同时也会把打包的文件引入<script src="bundle.js"></script>，自动引入，不需要设置引入

webpack-dev-server

下载安装到开发依赖

cnpm i webpack-dev-server --save-dev

参数设置

官方文档：https://www.webpackjs.com/configuration/dev-server/

在webpack.conf.js中添加配置：

    devServer: {//配置webpack-dev-server
      compress: true,//一切服务都启用gzip 压缩
      contentBase: path.join(__dirname, "dist"),//指定了服务器资源的根目录，如果不写入contentBase的值，那么contentBase默认是项目的目录。
      port: 8989,//设置服务器的端口号
      open:true,//打开配置的 http://localhost:8989
      //host: '0.0.0.0',//设置的是服务器的主机号,localhost:8989等于0.0.0.0:8989
      inline:true,//自动刷新页面
      hot:true,//热更新，不需要刷新页面就可以更新css文件
      historyApiFallback:{//这个配置属性是用来应对返回404页面时定向到特定页面用的,
         rewrites:[//需要先在dist目录下新建一个404.html
            {from:/./,to:'/404.html'}
         ]
        }
      }

配置

无法直接利用webpack-dev-server

可以通过直接输入node_modules/.bin/webpack-dev-server来启动服务器，可能很麻烦，可以
可以配置package.json，然后通过npm命令来执行，简化操作

--open 自动打开浏览器

-- hot 热更新，不在刷新的情况下替换css样式

--inline 自动刷新

-- port 9999 指定端口

--process 显示编译进度

可以在package.json中添加配置（有些参数若设置过可以不写）：

"devser": "webpack-dev-server --open --hot --inline --port 8989 --compress --config ./webpack.conf.js"

利用npm打开

npm run devser

注意：终端报错，但是可以打开网页

ERROR in ./node_modules/webpack-dev-server/client?http://localhost:8989
Module not found: Error: Can't resolve 'webpack/hot' in 'E:\VsCode\Vue\node_modules\webpack-dev-server\client'
 @ ./node_modules/webpack-dev-server/client?http://localhost:8989 76:17-67
 @ multi ./node_modules/webpack-dev-server/client?http://localhost:8989 (webpack)/hot/dev-server.js ./src/index.js

ERROR in ./node_modules/webpack-dev-server/client/utils/reloadApp.js
Module not found: Error: Can't resolve 'webpack/hot/emitter' in 'E:\VsCode\Vue\node_modules\webpack-dev-server\client\utils'
 @ ./node_modules/webpack-dev-server/client/utils/reloadApp.js 21:21-51
 @ ./node_modules/webpack-dev-server/client?http://localhost:8989
 @ multi ./node_modules/webpack-dev-server/client?http://localhost:8989 (webpack)/hot/dev-server.js ./src/index.js

发现上边存在hot相关的内容，可以推断是热更新错误，其次就是网页控制台的显示错误

client:150 [WDS] Errors while compiling. Reload prevented.

然后其他一些信息像这样，告诉我们需要webpack的一些文件，因此现在需要本地安装，之前是全局安装

./node_modules/_webpack-dev-server@3.10.3@webpack-dev-server/client/utils/reloadApp.js
Module not found: Error: Can't resolve 'webpack/hot/emitter' in 'E:\VsCode\Vue\node_modules\_webpack-dev-server@3.10.3@webpack-dev-server\client\utils'

一键引入

npm i less-loader css-loader style-loader url-loader file-loader less webpack-dev-server html-webpack-plugin -D

删除只需要把 i 改为 un

es6解析

安装模块

npm i babel-core babel-loader babel-preset-env babel-plugin-transform-runtime -D

babel中文文档：https://www.babeljs.cn/

babel-core —— 将js代码分析成ast（抽象语法树），方便各个插件分析语法进行相应的处理，有些语法在低版本的js中不存在，像箭头函数等，需要通过将其转化为ast，分析其语法后再转为低版本js

able转译器本身，提供了bable的API，

babel-loader —— 调用Babel的API完成转移过程，将es6的代码transform进行转义，与babel-core一起使用

babel-preset-env ———预设插件集，针对不同es6，es7，es7等版本对应代码书写，

还有其他版本的es2015，es2017，es2016等，evn是一个整合

babel-plugin-transform-runtime —— Babel默认制转换新的JavaScript语法，而不转换新的API，很多全局对象和方法不会转义，若想使用，必须使用babel-polyfill，为当前环境提供一个垫片

设置配置文件，引入loader

{ 
    test: /\.js$/, 
    use: 'babel-loader', 
    exclude: /node_modules/ 
},//处理js高级语法，es6或者更高版本

创建Babel的配置文件.babelrc ，并配置

{
    "presets":["env"], //presets字段设定转码规则,填写下载的转码规则
    "plugins":["transform-runtime"]
}

打包测试

出现错误的时，要仔细看看错误的原因,这个错误告诉我们，需要下载babel-loader@7版本

 babel-loader@8 requires Babel 7.x (the package '@babel/core'). If you'd like to use Babel 6.x ('babel-core'), you
should install 'babel-loader@7'.

单文件引入

导入 ——> 挂载 ——> 使用

下载包

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

第一次测试的时候成功了，但是再次测试确失败，只有一条错误 ERROR in ./src/index.js
Module not found: Error: Can't resolve '../App.vue' in 'E:\VsCode\Vue\src'
@ ./src/index.js 7:11-32，其意思就是找不到vue文件，经过分析我发现可能是没有下载第三方库造成的，于是测试一下，确实成功了

npm i vue -S

设置配置文件，引入loader

{
  test:/\.vue$/,
  use:'vue-loader'
},//处理vue文件

设置插件

const VueLoaderPlugin = require('vue-loader/lib/plugin');

在plugins中引入

plugins:[ // 添加plugins节点配置插件
        new VueLoaderPlugin()
    ],

写测试文件

在src目录下新建一个App.vue

<!-- 当前组件的结构 -->
<template>
    <div>
        {{msg}}
    </div>

</template>

<script >
// 当前组件的业务逻辑
export default {
    data(){
        return{
            msg:"hello App",
        }
    }
}
</script>

<!-- 组件样式 -->
<style>
    body{
        background-color: green;
    }
</style>

在index.js中引入组件

// es6,moudle的模块引入Vue
import Vue from "../vue.js";

//引入组件
import App from "./App.vue";

new Vue({
    el : "#app",
    components:{
        App,
    },
    template:`
        <App />
    `,
});

打包测试

一、webpack的安装和基础配置 ------ 2020-07
1、安装 webpack 2、webpack可以进行0配置 3、手动配置webpack 4、修改webpack默认...
开始使用webpack
作者：叶茂；标签: webpack webpack配置文件 webpack配置文件是使用webpack的核心，会配...
二 webpack 配置文件
webpack 默认配置文件是 webpack.config.js配置文件配置好后，就不用在执行 webpack ...
Vue.config.js各个属性说明
查看webpack配置项目规则指令查看vue所有webpack的配置项查看webpack插件配置项目 vue....
webpack noParse参数
webpack noParse webpack精准过滤不需要解析的文件 webpack配置中 module配置...
html-webpack-plugin
webpack 配置多页面应用引用 webpack.config.js 配置
webpack 模块加载原理及打包文件分析 (一)
一、demo 代码和 webpack 配置首先我是 webpack 4+。源文件如下： webpack 配置： ...
项目布局
├── build // webpack配置文件├── config // webpack配置文件├── dist...
webpack起步二
使用webpack配置文件（webpack.config.js）在 webpack 4 中，可以无须任何配置使用...
2018-03-21
react webpack 多页面应用的配置项目的目录结构 webpack 配置文件目录 webpack....