（VueJS）Webpack

最新推荐文章于 2024-04-17 22:43:32 发布

黑胡子大叔的小屋

最新推荐文章于 2024-04-17 22:43:32 发布

阅读量212

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/lzl980111/article/details/104826223

版权

前端专栏收录该内容

75 篇文章 0 订阅

订阅专栏

什么是Webpack

Webpack是一个Js的静态模块打包工具
这里有一篇总结的不错的博客：
https://blog.csdn.net/Rnger/article/details/81086938

关于安装配置webpack：
https://www.cnblogs.com/aizai846/p/11497508.html

关于npm使用淘宝镜像的博客：
https://www.cnblogs.com/yanxulan/p/8978732.html

想要在vscode的控制台上使用webpack需要管理员启动vscode
关于解决vscode中出现 “因为在此系统上禁止运行脚本” 的错误：
在这里插入图片描述

https://blog.csdn.net/larpland/article/details/101349586?utm_medium=distribute.pc_relevant_t0.none-task-blog-BlogCommendFromMachineLearnPai2-1.edu_weight&depth_1-utm_source=distribute.pc_relevant_t0.none-task-blog-BlogCommendFromMachineLearnPai2-1.edu_weight

模块 \ 模块化：
前端模块化方案：AMD、CMD、CommonJS、ES6

和grunt \ gulp的对比：

grunt \ gulp的核心是Task；

配置一系列的task，并且定义task要处理的事物（例如ES6、ts转化、图片压缩、scss转成css）
之后让grunt \ gulp来一次执行这些task，并且让整个流程自动化
所以grunt \ gulp也被称为前端自动化任务管理工具
gulp更强调任务，自动化
webpack强调模块化，依赖node环境

看一下Task：

下面的task就是将src下面所有的js文件转成ES5的语法
并且最终输出到dist文件夹中

什么时候用 grunt \ gulp：

工程模块依赖简单，甚至没有模块化
只需要简单的合并压缩

Webpack安装

Webpack和node和npm之间的关系：

webpack为了可以正常运行，必须依赖node环境；node环境为了可以正常的执行很多代码，会自带一个npm工具（node packages manager）

node.js的安装：

node安装包下载，下完下一步下一步安装就好

https://nodejs.org/en/download/
在这里插入图片描述

当安装过Chotolatey时，可以自动配置

Chotolatey的安装详见我另外一篇博客

https://blog.csdn.net/lzl980111/article/details/102832290

测试一下

node -v

在这里插入图片描述

安装webpack

npm install –save-dev webpack 或 npm install –save-dev webpack@[version]

在这里插入图片描述

Webpack的使用

初次运行webpack时报错：
使用npm命令提示: ‘npm’ 不是内部或外部命令，也不是可运行的程序
有一篇蛮好的博客解析：https://blog.csdn.net/weixin_41722928/article/details/82753022?utm_source=blogxgwz6
加入了path环境变量后重启了webstom后执行

npm init

在这里插入图片描述
起一个包的名字
一路回车下来
生成package.json

{
  "name": "meetwebpack",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  //scripts中定义的属性，可以在Terminal中通过  npm run test 调用
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"  //协议，开源需要
}

scripts中定义的属性，可以在Terminal中通过 npm run test 调用

测试出现

'webpack' 不是内部或外部命令，也不是可运行的程序或批处理文件。

的错误
淘到一篇有关 nodejs / npm / webpack 挺全的博客https://www.cnblogs.com/fengchaoran/p/8461317.html

测试报错：

One CLI for webpack must be installed. These are recommended choices, delivered as separate packages:
 - webpack-cli (https://github.com/webpack/webpack-cli)
   The original webpack full-featured CLI.
We will use "npm" to install the CLI via "npm install -D".
Do you want to install 'webpack-cli' (yes/no):
You need to install 'webpack-cli' to use webpack via CLI.
You can also install the CLI manually.

的报错

解决：

npm install webpack-cli@3.3.2 -g

小Demo

在这里插入图片描述
mathUtil.js:

function add(num1,num2) {
    return num1+num2;
}
function mul(num1,num2) {
    return num1*num2;
}
module.exports={
    add,mul
}

main.js:

console.log('aaa');
console.log('bbb');
//commenJS导入
const {add,mul}=require('./mathUtil.js');
console.log(add(20,50));
console.log(mul(2,10));

//ES6导入
import {age,sex,name} from './info.js';
console.log(age);
console.log(sex);
console.log(name);

webpack.config.js:

const path=require('path')

module.exports = {
    //入口
    entry:'./src/main.js',
    //出口，注意跟出口格式不同
    output:{
        //__dirname中保存的就是当前文件所在的路径，绝对路径
        path:path.resolve(__dirname,'dist'),
        filename:'bundle.js'
    }
}

执行 webpack 代码生成bundle.js文件

index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script src="./dist/bundle.js"></script>
</body>
</html>

执行结果：
在这里插入图片描述

Webpack相关插件

HtmlWebpackPlugin

作用：

1、可以自动生成一个index.html放到dist文件夹中
2、将打包的js文件自动加载到index.html中

引入：

npm install html-webpack-plugin -D

在webpack.config.js中添加如下配置：

const HttpWebpackPlugin=require('html-webpack-plugin')

    //插件配置
plugins:[
    new VueLoaderPlugin(),
    new HttpWebpackPlugin({
        template:'./index.html'
    }),
    new CleanWebpackPlugin(),
],

在这里插入图片描述

搭建node服务器，方便测试

webpack提供一个可选的本地开发服务器，这个服务器基于node.js开发，使用express框架，可以实现让浏览器自动刷新显示我们修改后的结果，修改后的结果存放在内存中。

安装：

npm install -D webpack-dev-server

配置：

    devServer:{
    //为哪一个文件夹提供本地服务
    contentBase:"./dist",
    //实时监听
    inline:true
}

在这里插入图片描述
此时可以通过：

 .\node_modules\.bin\webpack-dev-server

启动服务器

配置
在这里插入图片描述
此时就可以通过

npm run dev

启动服务器

对webpack.config.js进行抽离

在这里插入图片描述

prod.config.js:

const UglifyjsWebpackPlugin=require('uglifyjs-webpack-plugin')
module.exports={
    //插件配置
    plugins:[
        new UglifyjsWebpackPlugin()
    ]
}

dev.config.js:

module.exports={
devServer:{
    //为哪一个文件夹提供本地服务
    contentBase:"./dist",
    //实时监听
    inline:true
}
}

此时就将开发和打包产品的配置进行了分离，但是还没有将base同prod和dev进行组合，组合需要用到一个插件：

npm install webpack-merge

修改config.js

// 1、声明webpackMerge
const webpackMerge=require('webpack-merge')
const baseConfig = require('./base.config')
//2、重写module.exports
module.exports=(baseConfig,{
    devServer:{
        //为哪一个文件夹提供本地服务
        contentBase:"./dist",
        //实时监听
        inline:true
    }
})

此时就可以删除webpack.config.js了，并且修改package.json

  {
  "name": "VueTodo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --config ./build/prod.config.js",
    "dev": "webpack -dev-server --open --config ./build/dev.config.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "clean-webpack-plugin": "^3.0.0",
    "css-loader": "^4.2.2",
    "html-webpack-plugin": "^4.5.0",
    "vue-loader": "^15.9.3",
    "vue-template-compiler": "^2.6.12",
    "webpack": "^4.44.1",
    "webpack-cli": "^3.3.12",
    "webpack-dev-server": "^3.11.0",
    "webpack-merge": "^5.2.0"
  },
  "dependencies": {
    "vue": "^2.6.12"
  }
}

在这里插入图片描述

黑胡子大叔的小屋

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
（VueJS）Webpack

什么是WebpackWebpack是一个Js的静态模块打包工具模块 \ 模块化：前端模块化方案：AMD、CMD、CommonJS、ES6和grunt \ gulp的对比：grunt \ gulp的核心是Task；配置一系列的task，并且定义task要处理的事物（例如ES6、ts转化、图片压缩、scss转成css）之后让grunt \ gulp来一次执行这些task，并且让...
复制链接

扫一扫