Webpack_基础总结

简介

webpack 是前端的一个项目构建工具，它是基于node.js开发出来的一个前端工具。

网页中引入的静态资源，会引起网页加载速度慢（因为要发起很多的二次请求），还要处理错综复杂的依赖关系。

使用webpack打包可以解决各个包之间的复杂依赖关系。注意： webpack 只能打包JS文件，处理非JS文件需要 1.手动安装第三方loader 加载器。2.配置文件 配置module。

webpack 安装方式

npm i webpack -g

npm i webpack --save-dev

webpack打包方式

• 第一种

webpack src/js/main.js dist/bundle.js

• 第二种----简化版的打包命令

// 导入处理路径模块
var path = require('path');
// 导出一个配置对象，打包的时候会默认 读取该配置
moudle.exports = {
    entry: path.resolve(_dirname, 'src/js/main.js'),    // 项目入口文件
    output: {
        path: path.resolve(_dirname, 'dist'),    //  配置输出路径
        filename: 'bundle.js'
    }
}

• 第三种----实时打包构建

使用 webpack-dev-server 来实现代码实时打包编译。

运行    npm i webpack-dev-server --save-dev 安装开发依赖

命令行直接运行webpack-dev-server来打包，报错！需要：在 package.json 文件中，添加 "dev":"webpack-dev-server" ,可以《实时打包》。

？？？？但是在dist目录下并没有生成bundle.js文件，这因为打包好的文件放在了内存中。

使用 html-webpack-plugin 插件配置启动页面

运行    npm i html-webpack-plugin --save-dev 安装开发依赖
// 导入处理路径模块
var path = require('path');
// 导入自动生成HTML文件的插件
// 注意，只要是插件，都一定要 放到plugins节点中
var htmlWebpackPlugin = require('html-webpack-plugin ');
// 导出一个配置对象，打包的时候会默认 读取该配置
moudle.exports = {
    entry: path.resolve(_dirname, 'src/js/main.js'),    // 项目入口文件
    output: {
        path: path.resolve(_dirname, 'dist'),    //  配置输出路径
        filename: 'bundle.js'
    },
    plugins:[
        new htmlWebpackPlugin({
            template: path.resolve(_dirname, 'src/index.html'),     //模板路径
            filename: "index.html"  //自动生成的HTML文件的名称
        })
    ]
}

1.添加 "dev":"webpack-dev-server" 
2.html-webpack-plugin插件会自动把bundle.js注入到index.html页面中。

启用热更新

"dev":"webpack-dev-server --hot --port 3000 --open"
等价于：

1.第一步   配置dev-server 参数
devServer:{
	open: true,	//自动打开浏览器
	port: 3000,
	contentBase: 'src',	//指定托管的根目录
	hot: true
}
2.第二步  引入webpack 模块
var webpack = require('webpack');
3.第三步  在plugins节点下新增
new webpack.HotMoudleReplacementPlugin()	//	new一个热更新的模板对象

使用webpack打包css/less/sass文件

1.运行命令
npm i style-loader css-loader --save-dev
npm i less-loader less -D
npm i sass-loader node-sass --save-dev
2、配置文件
 moudle:{    //这个节点，用于配置 所有第三方模块加载器
        rules:[ //所有第三方模块的 匹配规则
            {test: /\.css$/, use:['style-loader', 'css-loader']},   //配置 .css 文件的第三方loader规则
            {test: /\.less$/, use:['style-loader', 'css-loader', 'less-loader']},  //配置 .less文件的第三方 loader规则
            {test: /\.less$/, use:['style-loader', 'css-loader', 'sass-loader']},  //配置 .scss文件的第三方 loader规则
        ]
    }