Webpack的基础配置以及使用脚手架创建工程

文章目录

Webpack的基础配置以及使用脚手架创建工程
- 一、模块化
- 二、webpack
- - 1.在项目中安装webpack
  - 2.完成更加复杂的打包工作（css文件）
  - 3. 完成更加复杂的打包工作（scss/less文件）
  - 4.完成对图片的打包
  - 5.将index.html文件拷贝到dist中
  - 6. 服务器工具 (将bundle.js 和index.html打包到了内存中)
- 三、webpack在Vue项目中使用
- 四、脚手架搭建工程
- 五、将代码自动保存成ESLint规定的代码
- 六、使用UI界面化进行创建工程

一、模块化

Nodejs（require、module.exports）

ES6 (import、export)

二、webpack

是一个打包工具。

1.在项目中安装webpack

npm init -y

初始化工程化。这个命令完成之后，会在项目中创建一个package.json文件（包管理文件）

下载webpack

npm install webpack webpack-cli --dev (development -- 开发阶段使用的包)
npm i webpack webpack-cli -D

package.json 文件中scripts
```
"scripts": {"build": "webpack"
}
```

2.完成更加复杂的打包工作（css文件）

在项目中添加 webpack.config.js 文件

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

对css文件处理
```
npm install style-loader css-loader -D
```

配置webpack.config.js

module.exports = {entry: "./src/index.js",output: {path: path.resolve(__dirname, "dist"),filename: "bundle.js"},module: {rules: [{test: /\.css$/,use: ["style-loader", "css-loader"]}]}
}

3. 完成更加复杂的打包工作（scss/less文件）

安装less、less-loader
```
npm install less less-loader -D
```

配置webpack.config.js

module.exports = {entry: "./src/index.js",output: {path: path.resolve(__dirname, "dist"),filename: "bundle.js"},module: {rules: [{test: /\.css$/,use: ["style-loader", "css-loader"]},{test: /\.less$/,use: ["style-loader", "css-loader", "less-loader"]}]}
}

4.完成对图片的打包

安装ulr- loader和file-loader
```
npm install url-loader file-loader -D
```

配置webpack.config.js

module.exports = {entry: "./src/index.js",output: {path: path.resolve(__dirname, "dist"),filename: "bundle.js"},module: {rules: [{test: /\.css$/,use: ["style-loader", "css-loader"]},{test: /\.less$/,use: ["style-loader", "css-loader", "less-loader"]},{test: /\.(jpg|png|gif|jpeg|webp|svg|woff)$/,use: "url-loader" // url-loader 会自动调用file-loader}]}
}

5.将index.html文件拷贝到dist中

插件（html-webpack-plugin）
```
npm install html-webpack-plugin -D
```

配置webpack.config.js

const htmlWebapckPlugin = require("html-webpack-plugin")
module.exports = {entry: "./src/index.js",output: {path: path.resolve(__dirname, "dist"),filename: "bundle.js"},module: {rules: [{test: /\.css$/,use: ["style-loader", "css-loader"]},{test: /\.less$/,use: ["style-loader", "css-loader", "less-loader"]},{test: /\.(jpg|png|gif|jpeg|webp|svg|woff)$/,use: "url-loader" // url-loader 会自动调用file-loader}]},plugins: [new htmlWebpackPlugin({template: './index.html'})]
}

6. 服务器工具 (将bundle.js 和index.html打包到了内存中)

安装
```
npm install webpack-dev-server -D
```

配置package.json

"scripts": {"dev": "webpack-dev-server","serve": "webpack-dev-server"
}

三、webpack在Vue项目中使用

npm install vue@2 --save(在开发和上线阶段都要使用)

npm install vue-loader@15 vue-template-compiler -D

四、脚手架搭建工程

Vue-cli是vue官方出品的快速构建单页应用的脚手架，能让我们更快的开始项目。

首先我们切换最新的淘宝镜像

npm config set registry https://registry.npmmirror.com

下载脚手架工具
```
npm install @vue/cli -gvue --version
```
使用脚手架安装工程`
```
vue create 工程名称
```
详细配置根据项目需要，更建议使用Vue UI配置

五、将代码自动保存成ESLint规定的代码

要安装ESLINT插件
要将工程的根目录放入vscode进行开发
升级VScode到最新版本

在首选项-> 设置->setting.json

"eslint.autoFixOnSave": true,"eslint.validate": ["javascript","javascriptreact",{"language": "html","autoFix": true},{"language": "vue","autoFix": true}],"editor.codeActionsOnSave": {"source.fixAll.eslint": true}

重启Vscode

六、使用UI界面化进行创建工程

vue ui

Vue2，Webpack的基础配置以及使用脚手架创建工程相关推荐

webpack大全---------(基础配置篇)----4.webpack实例三
上一篇:webpack大全---------(基础配置篇)----2.webpack实例二 webpack实例三:讲述代码效验模块eslint.引入第三方模块的处理.图片的打包处理. 第一步:安装配置 ...
Installshield6.x基础入门（一）创建工程
Installshield6.x基础入门(一)创建工程 Installshield 6.x是2000年发布的32位软件,支持操作系统最高为Windows2000. InstallShield 12是2 ...
webpack常用基础配置的一些总结
1.webpack的概念 webpack是一个流行的前端项目构建工具,可以解决目前web开发的困境. webpack提供了模块化支持,代码压缩混淆,解决js兼容问题,性能优化等特性,提高了开发效率和项 ...
Vue手把手带你入门(一) nodejs安装配置以及vue-cli脚手架创建第一个vue项目（超级详细）
开发Vue程序的第一步就是PC安装配置node.js 1官网下载安装Node(我的安装路径是D:\nodejs\) 点我安装(安装在除C盘外任意一个磁盘中) 2 检查node和npm是否安装完成下载 ...
vue 判断页面加载完成_在Vue+webpack中详细讲解基础配置
这篇文章主要介绍了Vue+webpack项目基础配置教程,需要的朋友可以参考下. 最近在学习webpack,跟着课程一个单页面应用,在这里记录一下. 这个部分主要讲了如何配置webpack的环境,以及 ...
vs vue 查看webpack安装成功_在Vue+webpack中详细讲解基础配置
这篇文章主要介绍了Vue+webpack项目基础配置教程,需要的朋友可以参考下. 最近在学习webpack,跟着课程一个单页面应用,在这里记录一下. 这个部分主要讲了如何配置webpack的环境,以及 ...
（超全）Vue.js学习笔记—webpack基础配置（webpack4+babel7+vue2）
webpack基础配置&&单文件组件与vue-loader 参考<Vue,js>实战(梁灏编著) 笔者近期学习Vue.js进阶篇,参考教程流程完成webpack.vue.b ...
6个必须掌握的基础配置 - [webpack第一篇]
webpack实战系列全目录 webpack6个常见的基础配置知识点 webpack 12个常见的实际场景 webpack15个常见的优化策略[敬请期待] webpack从0打造兼容ie8的脚手架[敬 ...
webpack - 基础配置教程
目录什么是webpack? 简要介绍 webpack中的模块打包(bundle)的概念 webpack的工作 webpack如何分析模块依赖关系 webpack五大核心概念 entry outpu ...

Vue2，Webpack的基础配置以及使用脚手架创建工程

Webpack的基础配置以及使用脚手架创建工程

文章目录

一、模块化

二、webpack

1.在项目中安装webpack

2.完成更加复杂的打包工作（css文件）

3. 完成更加复杂的打包工作（scss/less文件）

4.完成对图片的打包

5.将index.html文件拷贝到dist中

6. 服务器工具 (将bundle.js 和index.html打包到了内存中)

三、webpack在Vue项目中使用

四、脚手架搭建工程

五、将代码自动保存成ESLint规定的代码

六、使用UI界面化进行创建工程

Vue2，Webpack的基础配置以及使用脚手架创建工程相关推荐

最新文章

热门文章