webpack的配置信息

nrm的使用

npm i nrm -g 全局安装nrm（提供常用的下载包地址，真正使用的装包工具还是npm）
nrm ls 查看清单列表（查看镜像地址，所谓镜像地址，就是从[https://registry.npmjs.org
](官网)原版复制过来，方法和名称是一样，只是服务不一样）
nrm use cnpm 使用cnpm的镜像地址
npm i jquery 使用cnpm的镜像下载jquery

cnpm是一个装包工具

npm i cnpm -g 下载后使用的是cnpm装包工具，不是上面的镜像地址
cnpm i jquery 使用cnpm装包工具下载jquery

webpack是什么？

加载前端静态资源会发送二次请求，而且会有错综复杂的依赖关系（比如引入bootstrap还要引入jquery）
webpack是基于node构建前端项目的工具（gulp是处理task小任务的，然后构建起来）

webpack的作用

可以减少二次请求，可以处理错综复杂的依赖关系
可以将高一级语法（es6）装换成低一级语法
可以完美实现资源的合并、打包、压缩、混淆等诸多功能

前期文件的准备工作

webpack初学者第一版-LMLPHP

在项目根目录下新建dist(存放我们的要转换的文件，给客户的文件),src(开发的文件，新建css，images，js文件夹，index.html,main.js（项目的入口文件）)

webpack的使用

webpack ‘输入地址’ ‘转换成文件的地址’
会报错，我们可以全局和本地安装webpack和webpack-cli（4以上的版本是分开的，所以要逐个安装）
还要指定开发环境和生产环境
直接使用webpack不加命令和地址
这里相当于node每次都要输入webpack
webpack怎么运行：当输入webpack，我们并没有指定的出口和出口，然后我们会找到根目录的配置文件
(webpack.config.js)解析执行配置文件，导出配置对象，拿到配置对象，指定出口和入口，然后进行打包构建
var path = require(‘path’)
```
module.explores={

	entry:path.join(__dirname,'./src/main.js'),

	output:{

	path:path.join(__dirname,'./dist'),
	//path: path.resolve(__dirname, 'dist'), // 配置输出的路径

	filename:'bundle.js'

}

}
```
问题：但是每次都要输入webpack，想跟node一样可以输入nodemon即可更新
webpack-dev-server
本地安装webpack和webpack-cli （没安装会报错提箱）
npm i webpack-dev-server -D 本地安装server
npm init -y 安装package.json文件
配置启动server（因为我们不能启动），所以配置package.json在scripts
“dev”:“webpack-server-dev --open --port 3000 --contentBase src --hot”
–open 实现帮我们自动打开浏览器
–port 自定义端口号
–contentBase 设置网站根目录文件，index.html
–hot 实现下载热更新（保存文件浏览器会自动刷新网站，生成的bundle.js试想局部刷新，不会出现整个刷新的情况）
问题：使用–contentBase比较繁琐，需要制定根目录，而且会使用script引入物理磁盘的bundle.js
html-webpack-plugin
npm i html-webpack-plugin -D 生成一个index.html内存的页面,然后把打包好的bundle.js注入到页面中
package.json: “dev”:“webpack-server-dev”
如果在物理路径使用，则src是根目录，容易找不到文件
配置webpack.config.js
const path = require(‘path’)
const webpack = require(‘webpack’)
const htmlWebpackPlugin = require(‘html-webpack-plugin’)
//所有的插件都使用在plugins里面
module.exprots = {
extry:path.join(__dirname,’./src/main.js’),
output:{
path:path.join(__dirname,’./dist’),
filename:‘bundle.js’
},
plugins:[
new htmlWebpackPlugin ({
template:path.join(__dirname,’./src/index.html’),//z指定我们的模板文件
filename:‘index.html’
})
]
}
第三方配置文件
在plugins同级引入module模块，下载第三方配置文件，rules属性，存放第三方文件和处理规则
.css处理 npm i style-loader css-loader -D
.less npm i less-loader less -D
.scss npm i sass-loader node-sass --save-dev
//如果使用npm下载不了node-sass则使用cnpm，而且不要单独下载
module:{
rules:[
{test:/.cssKaTeX parse error: Expected 'EOF', got '}' at position 36: …','css-loader']}̲, {…/,use:[‘style-loader’,‘css-loader’,‘less-loader’]},
{test:/.cssKaTeX parse error: Expected 'EOF', got '}' at position 50: …,'sass-loader']}̲, ] …/,use:‘url-loader?limit=7632&name=[name].[ext]’}
//会全部转换为base64，虽然减少二次请求，但是我们大图片不需要转换，所以传参数？ &
小于7632byte时，则还是base64
//会帮我们转成长字符串，防止图片重名 &name=[name].[ext] 不转换我们的名字
//如果不同目录的images重名，默认放在都是在项目根目录
想要原来的名字，但又不能重名导致图片替换，可以加个哈希值 [hase:8]-[name].[ext]
7.字体配置
{test:/.(ttf|eot|svg|woff|woff2)$/,use:‘url-loader’}
webpack.config.js
const path = require(‘path’)
```
const webpack = require('webpack')

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

module.exports = {

    entry:path.join(__dirname,'./src/main.js'),

    output:{

        path:path.join(__dirname,'./dist'),

        filename:'bundle.js'

    },

    plugins:[

        new htmlWebpackPlugin({

            template:path.join(__dirname,'./src/index.html'),

            filename:'index.html'

        })

    ],

    module:{

        // 这个节点用于配置第三方所有的模块加载器

        rules:[

            {test:/\.css$/,use: ['style-loader', 'css-loader']},

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

            {test:/\.scss$/,use: ['style-loader', 'css-loader','sass-loader']}

            // 从右到左调用规则

        ]

    }

}
```
package.json
“scripts”: {
```
    "test": "echo \"Error: no test specified\" && exit 1",

    "dev": "webpack-dev-server"

  },
```
控制台终端输入: npm run dev
配置HotModuleReplacementPlugin() 插件节点
package.json: “dev”:“webpack-server-dev”
const path = require(‘path’)
```
//const webpack = require('webpack')

const webpack = require('webpack')

//使用热更新导入包

module.exports = {

    entry:path.join(__dirname,'./src/main.js'),

    output:{

        path:path.join(__dirname,'./dist'),

        filename:'bundle.js',

        open:true,

        port:5000,

        contentBase:'src',

        hot:true

        // 使用第二种方式npm run dev

    },

    plugins:[//配置插件的节点

        new webpack.HotModuleReplacementPlugin()

        //热更新的模块对象

    ]

}
```
命令
–save-dev（-D）：安装到本地依赖（开发环境中：package.json devDependencies ）
–save（-S） : 生产环境中（package.json devdependencies）
npm i webpack --save-dev 安装到项目依赖中
npm i webpack -g 全局安装webpack
npm webpack -v 查看版本号
npm webpack -h 帮助
npm init -y 下载package.json（包含中文，要使用npm init）
npm install bootstrap@3
npm i //装packjson的包

weixin_41105030

webpack初学者第一版

webpack的配置信息