标签：npm md index module loader 学习 webpack vue2 js
# Vue2基础学习
[toc]
## 前端
### 工程化要求
- 模块化
- 组件化
- 规范化
- 自动化
### webpack
**webpack**是前端项目工程化的具体解决方案。
功能：
1. 前端工程化
2. 代码压缩、混淆
3. JS兼容性
4. 性能优化
#### 基本使用
```shell
# 1. 新建工程目录
# 2. 运行 npm init 已创建pakage.json文件
# 3. 新建 src 目录，新建 src/index.html 和 src/index.js
# 4. npm install jquery 以安装jQuery
# 5. npm install webpack webpack-cli -D # 已dev依赖安装webpack
# 6. 配置webpack.config.js
module.exports = {
mode: "development" // development or production
}
# 7. 配置package.json的scripts节点
************
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "webpack" // 可以通过npm run dev 运行
},
************
# 8. 运行 npm run dev.会根据src/index.js 生成 dist/main.js
```
目录结构：
```shell
nsfoxer@nsfoxer-pc ~/temp> tree change-row
change-row
├── dist
│ └── main.js
├── package.json
├── package-lock.json
├── src
│ ├── index.html
│ └── index.js
└── webpack.config.js
2 directories, 6 files
```
`index.html`:
```html
Document
<script src="../dist/main.js"></script>
- This is 1 li
- This is 2 li
- This is 3 li
- This is 4 li
- This is 5 li
- This is 6 li
- This is 7 li
- This is 8 li
- This is 9 li
```
`index.js`
```js
// import package
import $ from 'jquery'
// 2. define jQuery entry function
$(function() {
$('li:odd').css('background-color', 'red')
$('li:even').css('background-color', 'pink')
})
```
`webpack.config.js`
```js
const path = require('path')
module.exports = {
mode: "development" // development or production.
entry: path.join(__dirname, "src/index.js") // 指定要处理的js文件
output: {
path: path.join(__dirname, "./dist/"), // 输出目录
filename: "main.js" // 输出文件名
},
devServer: { // 自动打开浏览器
open: true,
host: '127.0.0.1',
port: 8080
}
}
```
`package.json`
```json
{
"name": "change",
"version": "1.0.0",
"description": "None",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "webpack"
},
"author": "",
"license": "ISC",
"dependencies": {
"jquery": "^3.6.0"
},
"devDependencies": {
"webpack": "^5.73.0",
"webpack-cli": "^4.10.0"
}
}
```
#### 插件
- `webpack-dev-server`: 实时刷新代码构建
使用步骤
1. `npm install webpack-dev-server -D`
2. 修改`package.json`的`scripts`节点: "dev" : "webpack serve"
3. 修改`index.html`导入`js`位置
4. 启动： `npm run dev`
- `html-webpack-plugin`:
- `npm install html-webpack-plugin -D`
- ```js
// 1. 导入HTML插件
const HtmlPlugin = require('html-webpack-plugin')
// 2. 创建HTML实例对象
const htmlPlugin = new HtmlPlugin({
template: './src/index.html', // 原文件路径
filename: './index.html' // 生成路径
})
// 3. 添加插件导出
module.exports = {
mode: "development",
plugins: [htmlPlugin],
}
```
#### loader加载器
webpack默认只处理`js`后缀文件，`loader`用于处理其他文件，也用于`bable`加载。
处理`css`文件：
```shell
# 1. npm install style-loader css-loader -D
# 2. 修改webpack.config.js
module.exports = {
mode: "development",
plugins: [htmlPlugin],
devServer: { // 自动打开浏览器
open: true,
port: 9091,
host: '127.0.0.1'
},
module: {
rules: [
{test: /\.css$/, use: ['style-loader', 'css-loader']} // index.css先转交最后一个加载器 css-loader,之后转给style-loader,最后转给webpack，把结果写入 dist/bundle.js
]
}
}
```
处理`less`文件
```shell
# 1. npm install less-loader less -D
# 2. 修改webpack.config.js的module节点
module: {
rules: [
{test: /\.less/, use: ['style-loader', 'css-loader', 'less-loader']}
]
}
```
处理`jpg|png|gif`文件
```shell
# 1. npm install url-loader file-loader -D
# 2. 修改webpack.config.js的module节点
module: {
rules: [
{test: /\.jpg|png|gif/, use: 'url-loader?limit=22229'} // 转为base64，limit限制大小
}
```
处理`babel`
```shell
# 1. npm install babel-loader @babel/core @babel/plugin-proposal-decorators -D
# 2. 修改webpack.config.js的module节点
module: {
rules: [
{test: /\.js/, use: 'babel-loader', exclude: '/node_modules/'}
}
# 3. 配置babel-loader,babel-config.js
module.exports = {
plugins: [['@babel/plugin-proposal-decorators', {legacy: true}]]
}
```
#### 打包发布
```shell
# 1. 配置package.json
"scripts": {
"dev": "webpack serve",
"build": "webpack --mode production"
}
```
标签：npm,md,index,module,loader,学习,webpack,vue2,js
来源： https://www.cnblogs.com/nsfoxer/p/16501158.html
本站声明：
1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。
