手动配置webpack

一、webpack

提供友好的前端模块化开发支持，以及代码压缩混淆、处理浏览器端JS的兼容性、性能优化等功能

// 选择一个目录，打开cmd
// 初始化package.json
npm init -y   
        
// -S 安装到 dependencies，项目部署和上线后需要使用
npm install jquery -S  

// -D 安装到 devDependencies，只在开发阶段使用
npm install webpack webpack-cil -D

二、项目中配置webpack

webpack.config.js 配置文件

• develpment 开发阶段 （速度）
• production 产品上线 （压缩）

npm run dev   // 进行webpack打包 

• entry节点：指定打包入口 （默认src/index.js）
• output节点：指定打包的出口 （默认dist/main.js）

三、webpack中的插件

1、webpack-dev-server

• 修改源代码，webpack监听自动进行项目打包。（打包的出口默认dist/bundle.js）
• 监听端口8080/

npm install webpack-dev-server -D

在使用 webpack 的项目自动打包工具 webpack-dev-server 时，访问不到页面的解决方案 。

 devServer: {
        static: {
          directory: path.join(__dirname, "/"),
        },
      }

2、html-webpack-plugin

自定制index.html内容,放入内存并引用bundle.js，便于访问http://localhost:8080/进入index.html

// 1.导入html-webpack-plugin，得到一个构造函数
const HtmlPlugin = require('html-webpack-plugin')
// 2.创建 HTML插件的实例对象
const htmlPlugin = new HtmlPlugin({
  template:'',  // 原文件的存放路径
  filename:''   // 生成文件的存放路径
})
 plugins:[htmlPlugin] // 3.plugin节点，使htmlPlugin生效
}

3、loader加载器

webpack默认只打包 .js 后缀名的模块，其他需要调用loader加载器。

• css-loader

npm i style-loader css-loader -D

module:{
	rules:[
	// 定义不同模块对应的loader
		{ test:/\.css$/,use:['style-loader','css-loader']}
]
}

• less-loader

npm i less-loader -D

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

• babel-loader
  打包高级js语法

npm i babel-loader @babel/core @babel/plugin-proposal-decorators -D

{ test:/\.js$/,use:'babel-loader',exclude:/node_modules/}

配置babel-loader

// babel.config.js
module.exports={
	plugins:[['@babel/plugin-proposal-decorators',{legacy:true}]]
}

• url-loader file-loader

npm i url-loader file-loader -D

 { test:/\.jpg|png|gif$/,use:'url-loader'}

实例

// test
 <img src="./logo.jpg">
 <img src="data:image/jpeg;base64,...> //（base64格式）

加载器把图片转换为base64格式

<!-- js -->
// 1.导入图片，得到图片文件
import logo from './images/logo.jpg'

// 2.给图片动态赋值
$('.box').attr('src',logo)

<!-- html-->
 <img src="" class="box">

精灵图

四、vue-cil 工具自动配置webpack

不需要手写webpac配置文件，但是要理解每个插件

  // 开发环境下，建议浏览器报错行数 和 实际行数相同
   devtool:'eval-source-map'
   
  // 生产环境下，建议只定位行数，不暴露源码
   devtool:'nosources-source-map'