Vuejs Webpack详解

最新推荐文章于 2023-03-19 08:46:36 发布

NGC_2070

最新推荐文章于 2023-03-19 08:46:36 发布

阅读量455

点赞数 1

分类专栏： # Vue学习笔记文章标签： vue.js html5 node.js

本文链接：https://blog.csdn.net/baidu_41388533/article/details/120613347

版权

Vue学习笔记专栏收录该内容

26 篇文章 2 订阅

订阅专栏

Vuejs Webpack详解

参考：最全最新Vue、Vuejs教程，从入门到精通_哔哩哔哩_bilibili

Vuejs Webpack详解

什么是Webpack？

前端模块化

和grunt/gulp的对比

webpack安装

webpack基本使用

VS Code Webpack打包问题处理

使用ES6导出方式

入口和出口 webpack配置文件

局部安装webpack

package.json中定义启动

什么是loader？

css文件处理

css文件处理 - 准备工作

css文件处理 – 打包报错信息

css文件处理 – css-loader

css文件处理 – style-loader

示例：将css文件打包到js文件中

less文件处理

less文件处理 – 准备工作

less文件处理 – less-loader

less文件示例

图片文件处理

图片文件处理 – 资源准备阶段

图片文件处理 – url-loader

图片文件处理 – file-loader

图片文件处理 – 修改文件名称

示例

ES6语法处理

引入vue.js

打包项目 – 错误信息

el和template区别

Vue组件化开发引入

.vue文件封装处理

自动填充后缀

认识plugin

添加版权的Plugin

打包html的plugin

js压缩的Plugin

搭建本地服务器

webpack配置文件分离

什么是Webpack？

从本质上来讲，webpack是一个现代的JavaScript应用的静态模块打包工具。
但是它是什么呢？
用概念解释概念，还是不清晰。我们从两个点来解释上面这句话：模块和打包

前端模块化

和grunt/gulp的对比

webpack安装

nodejs安装参考：Windows平台安装Node.js[转]_baidu_41388533的博客-CSDN博客

安装命令： npm install webpack@3.6.0 -g

查看版本：

webpack基本使用

VS Code Webpack打包问题处理

示例：

参考：webpack : 无法加载文件 D:\nodejs\node_global\webpack.ps1，因为在此系统上禁止运行脚本。 - 奇异宝 - 博客园
解决方案：
以管理员身份运行vs code
执行：get-ExecutionPolicy，显示Restricted，表示状态是禁止的
执行：set-ExecutionPolicy RemoteSigned
这时再执行get-ExecutionPolicy，就显示RemoteSigned

查看生成的文件：

引用bundle.js即可

执行结果：

使用ES6导出方式

引用：

输出：

入口和出口 webpack配置文件

如果每次使用webpack的命令都需要写上入口和出口作为参数，就非常麻烦，有没有一种方法可以将这两个参数写到配置中，在运行时，直接读取呢？
当然可以，就是创建一个webpack.config.js文件

示例：
先在webpack.config.js 目录下执行 npm init

定义包的名字

回车生成package.json

如果package.json有依赖，输入 npm install 安装

写webpack.config.js配置文件：
const path = require('path')

module.exports = {
    entry: './src/main.js',
    output:{
        path: path.resolve(__dirname, 'dist'),
        filename:'bundle.js'
    },

}
执行webpack

将webpack命令和npm run build进行映射（优先使用本地webpack）

局部安装webpack

npm install webpack@3.6.0 --save-dev

package.json多出开发时依赖

package.json中定义启动

什么是loader？

css文件处理

css文件处理 - 准备工作

css文件处理 – 打包报错信息

css文件处理 – css-loader

css文件处理 – style-loader

CSS loader 示例
参考网址：https://www.webpackjs.com/

使用：

注意版本问题：https://blog.csdn.net/weixin_43717016/article/details/109288271
css-loader 版本号,如何找到webpack对应的loader版本_歌者曼曼的博客-CSDN博客
示例： npm install --save-dev url-loader@1.1.2
通过下面可以查到对应版本，GitHub tag

示例：将css文件打包到js文件中

添加依赖

直接在命令行中使用npm run build 报错，先安装 loader
参考网址：css-loader | webpack 中文网
注意版本号：npm install --save-dev css-loader@1.0.1 ，否则报如下错误

npm install --save-dev style-loader@1.0.1

修改配置文件(多个loader从右向左读取)：

执行脚本 npm run build

less文件处理

less文件处理 – 准备工作

less文件处理 – less-loader

less文件示例

创建less文件

添加依赖：

安装依赖项
webpack使用less-loader出错处理_千弦H的博客-CSDN博客_webpack打包less文件出错
npm intall less-loader@4.1.0 less@4.1.0
坑：前面安装了css loader 可以使用，后面执行突然就识别不到已经安装的的loader了，各种换版本重装都识别不到loader，后面查到需要加style-loader!css-loader!

图片文件处理

图片文件处理 – 资源准备阶段

图片文件处理 – url-loader

图片文件处理 – file-loader

图片文件处理 – 修改文件名称

示例

先安装 npm install --save-dev url-loader@1.1.2，命名： 'name:'img/[name].[hash:8].[ext]'

小于设置的值，需要使用file-loader
npm install --save-dev file-loader@3.0.1
修改路径（URL自动拼接dist/ ,发布时index.html放在dist目录下需要删除这个拼接）：

最终效果：

ES6语法处理

npm install --save-dev babel-loader@7 babel-core babel-preset-es2015
babel-loader | webpack 中文网

配置：

引入vue.js

安装：

使用：

打包项目 – 错误信息

配置

el和template区别

template替换掉el元素所在位置：

Vue组件化开发引入

进行分离：

import Vue from "vue";

const App={
    template:`
    <div>
        <h2>{{message}}</h2>
        <button @click="btnClick">按钮</button>
        <h2>{{name}}</h2>
    </div>
    `,
    data(){
       return  {
            message: "Hello Vue and Webpack",
            name:'vue'
        }
    },
    methods:{
        btnClick(){

        }
    }

}

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

直接新建vue文件夹，建立app.js文件

引入使用

.vue文件封装处理

npm install vue-loader vue-template-compiler --save-dev

配置：

案例：

使用：

自动填充后缀

认识plugin

添加版权的Plugin

示例：

结果：

打包html的plugin

npm install html-webpack-plugin@3.2.0 --save-dev

示例
下载插件后进行配置：

js压缩的Plugin

npm install uglifyjs-webpack-plugin@1.1.1 --save-dev

搭建本地服务器

npm install --save-dev webpack-dev-server@2.9.1

示例：

添加脚本文件：

webpack配置文件分离

新建build目录，建立基本的配置文件 base.config.js，放一些公共的东西，比如不要配置服务器已经发布时的丑化
然后再build目录下创建prod.config.js以及dev.config.js

然后在webpack.config.js同级目录下
npm install webpack-merge --save-dev
安装好插件后进行合并：

修改配置文件

修改目标目录：