webpack

最新推荐文章于 2023-04-11 00:40:32 发布

GQDD99

最新推荐文章于 2023-04-11 00:40:32 发布

阅读量132

点赞数

分类专栏：构建打包文章标签： webpack 前端 javascript

本文链接：https://blog.csdn.net/GQDD99/article/details/128449054

版权

构建打包专栏收录该内容

2 篇文章 0 订阅

订阅专栏

webpack（流行的前端项目构建（打包）工具）

功能：友好模块化支持，解决代码压缩混淆、js兼容、性能优化
查看版本号：npx webpack -v（webpack 是局部安装，要进入依赖包执行webpack的命令才有效，直接 webpack -v 会被认为命令无效。使用 npm 包执行器 npx 可以自动找到对应的包执行命令（一般安装了npm会自动安装npx））
查看 webpck 最新版本：npm info webpack
查看其他npm 包最新版本：npm info 包名

使用：

新建项目空白目录，运行npm init -y命令，初始化包管理配置工具
新建src源代码目录
新建src->index.html首页
初始化首页基本结构
运行npm install jquery -s命令，安装jquery

安装配置：

安装webpack相关包：npm install webpack webpack-cli –D
项目根目录中创建webpack.config.js配置文件
初始化配置文件：

module.exports={
    mode: 'development'（mode用来指定构建模式，development：开发模式（不会压缩混淆，转换时间短），production：发布模式（会压缩混淆，转换时间长））
}

在package.json配置文件中scripts节点新增dev脚本

  "scripts": {
    "dev": "webpack" （script节点下脚本可通过npm run执行）
  }

终端运行npm run dev命令，启动webpack进行项目打包

打包入口文件 src/index.js

打包出口文件 dist/main.js

修改出入口：webpack.config.js新增如下信息

const path = require("path");（导入node.js中路径操作模块）
module.exports = {
 entry: {__dirname, '打包入口文件路径' },
 output: {
  path: path.join(__dirname, "输出文件存放路径"),
  filename: 'bundle.js',（输出文件名称）
 }
}

自动打包功能：

安装自动打包工具：npm install webpack-dev-server -D
修改package.json -> scripts 中的dev命令

  "scripts": {
    "dev": "webpack-dev-server" （script节点下脚本可通过npm run执行）
  }

将src -> index.html中，script脚本的引用路径，修改为"/button.js"
终端运行 npm run dev 重新打包
浏览器中访问http://localhost:8080，查看自动打包效果
webpack -dev-server：会启动实时打包的http服务器，打包生成的输出文件,默认放到了项目根目录中，而且是虚拟的、看不见的

预览生成：

安装插件：npm install html-webpack-plugin -D
修改webpack.config.js文件头部

const HtmlWebpackPlugin = require('html-webpack-plugin');（导入插件得到一个构造函数）
const htmlPlugin = new HtmlWebpackPlugin({（创建插件实例对象）
  template:'./src/index.html',（指定显示首页）
  filename: 'index.html'（指定生成文件名称，该文件存于内存中，目录中并不显示）
})

修改webpack.config.js文件向外暴露的配置对象，新增如下节点

module.exports = {
  plugins: [htmlPlugin]（plugins数组是webpack打包时用到的插件列表）
};

修改package.json中参数：open打包完成后自动打开浏览器页面，host配置ip地址，port配置端口

  "scripts": {
    "dev": "webpack-dev-server --open --host 127.0.0.1 --port 8888" 
  }

loader加载器：打包非.js结尾文件

less-loader打包.less文件
sass-loader打包.scss文件
url-loader打包css中url路径相关文件

安装加载器：npm i style/less/sass-loader css-loader/less/node-sass -D
在webpack.config.js的module->rules数组中添加加载器规则（text表示匹配文件类型，use表示对应调用loader，use数组中loader顺序固定，多个loader从后向前调用）

module: {
  rules: [
    { text: /\.css$/, use: ['style-loader', 'css-loader', 'less-loader', 'sass-loader']}
  ]（挂载插件）
}

postCSS自动添加css兼容前缀加载器

安装：npm i postcss-loader autoprefixer -D
根目录创建postcss的配置文件postcss.config,js并初始化

const autoprefixer = require("autoprefixer");（导入自动添加前缀插件）
module.exports = {
  plugins: [autoprefixer]（挂载插件）
}

在webpack.config.js的module->rules数组修改css规则

module: {
  rules: [
    { text: /\.css$/, use: ['style-loader', 'css-loader', 'postcss-loader']}
  ]（挂载插件）
}

样式表图片和字体文件打包：?号后是loader参数项，limit指图片大小，小于limit大小图片转成base64格式

安装：npm i url-loader file-loader -D
在webpack.config.js的module->rules数组中添加规则

module: {
  rules: [
    {
      test: /\.jpg|png|gif|bmp|ttf|eot|svg|woff|woff2$/,
      use: 'url-loader?limit=16940'
    }
  ]（挂载插件）
}

js高级语法打包：

安装转换器包：npm i babel-loader @babel/core @babel/runtime -D
安装插件包：npm i @babel/preset-env @babel/plugin-transform-runtime @babel/plugin-proposal-class-properties -D
根目录创建babel的配置文件babel.config,js并初始化

module.exports = {
    presets: ['@babel/preset-env'],
    plugins: ['@babel/plugin-transform-runtime', '@babel/plugin-proposal-class-properties']
}

在webpack.config.js的module->rules数组中添加规则（exclude为排除项，表示babel-loader不需要处理node_modules中js文件）

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

vue组件加载器

安装：npm i vue-loader vue-template-compiler -D
webpack.config.js配置文件添加vue-loader的配置项

const VueLoderPlugin = require('vue-loader/lib/plugin');
module.exports = {
	modules:{
		rules:[
			{test: /\.vue$/,loader: 'vue-loader'}
		]
	},
	plugins: [new VueLoaderPlugin()]
}

webpack 中如何使用 vue

安装vue包：npm i vue -S
在入口文件index.js中，通过import Vue from ‘vue’导入 vue 构造函数
创建Vue的实例对象，并指定要控制的el区域
通过render函数渲染App根组件

    import Vue from 'vue' // 导入 Vue 构造函数
    import App from './components/App.vue' // 导入 App组件

    // 创建一个 Vue 实例
    var vm = new Vue({
      el: '#app', // 指定vm实例要控制的el区域
      render: h => h(App) //通过 render 函数，把指定的组件渲染到el区域中
    });

打包发布

配置：在 package.json 文件的 scripts 节点下，新增 build 命令

  "scripts": {
    "build": "webpack -p"
  }

发布：终端npm run build