webpack打包流程是什么

发布时间:2022-08-09 10:04:02 作者:iii
来源:亿速云 阅读:299

这篇“webpack打包流程是什么”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“webpack打包流程是什么”文章吧。

webpack打包流程是什么

webpack :是一个用于现代 JavaScript 应用程序的 静态模块打包工具。当 webpack 处理应用程序时,它会在内部从一个或多个入口点构建一个 依赖图(dependency graph),然后将你项目中所需的每一个模块组合成一个或多个 bundles,它们均为静态资源,用于展示你的内容。

WebPack可以看做是模块打包机:它做的事情是,分析你的项目结构,找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言(Sass,TypeScript等),并将其转换和打包为合适的格式供浏览器使用。在3.0出现后,Webpack还肩负起了优化项目的责任。

这段话有三个重点:

1、创建一个新项目,然后执行

npm init

2 、全局安装webpack以及webpack-cil

npm install -g webpack

npm install -g webpack-cil

3、将webpack安装到项目依赖,这样就可以使用本地版的webpack

npm install webpack -save-dev

npm install webpack-cil -save-dev

4、创建最外层的webpack.config.js,改变默认设置

作用:是为了方便不用每次打包的时候都输入目录地址,而是直接webpack即可

const path = require('path');

const webpack = require('webpack');

const HtmlWebpackPlugin = require('html-webpack-plugin');

const CopyPlugin = require('copy-webpack-plugin');

module.exports = {

mode: 'development',

entry: './src/index.js', // 指定打包入口文件

output: {

filename: 'index.js', // 指定打包输出文件名

path: path.resolve(__dirname, './public'), // 指定打包输出路径

},

module: { // 对模块的处理逻辑

rules: [ // 一系列的加载器的处理逻辑

{

test: /\.css$/, // 正则 匹配到文件后缀

use: [

'style-loader',

'css-loader',

], // 用此加载器处理匹配到的文件

exclude: [ // 排除此文件夹下的文件

path.resolve(__dirname, './node_modules')

]

}

],

},

resolve: {

extensions: ['.js', '.json', '.jsx', '.css'] // 自动补全识别后缀

},

plugins: [

new HtmlWebpackPlugin({

template: './src/index.html',

minify: {

removeAttributeQuotes: true,

},

hash: true,

}),

new webpack.EnvironmentPlugin(

{

NODE_ENV: 'development',

TEST: 'true',

}

),

new CopyPlugin({

patterns: [

{from: path.resolve(__dirname, './src/index.css'), to: path.resolve(__dirname, './public')},

],

}),

],

// 配置webpack服务

devServer: {

port: 8000, // 启动服务监听端口

host: 'localhost', // 可以通过localhost访问

open: true, // 自动打开浏览器

hot: true, // 启动热更新

},

};

5 、安装HtmlWebpackPlugin

该插件将为你生成一个 HTML5 文件, 在 body 中使用 script 标签引入你所有 webpack 生成的 bundle。 只需添加该插件到你的 webpack 配置中

npm install --save-dev html-webpack-plugin

6、安装CopyWebpackPlugin

该插件是将需要的文件打包copy到你所需要的地方,我之所以安装此插件,是因为我打完包之后,css并没有打包成功,之后尝试了很多方式还是没有成功,只能手动执行这个将css包copy过去

npm install copy-webpack-plugin --save-dev // 安装

// 使用 from 和 to就是 将form地方的文件copy到to地方

const CopyPlugin = require("copy-webpack-plugin");

module.exports = {

plugins: [

new CopyPlugin({

patterns: [

{ from: "source", to: "dest" },

{ from: "other", to: "public" },

],

}),

],

}; // webpack.config.js

7、两种打包方法

webpack --mode development // 开发模式 不压缩

webpack --mode production // 生产模式 压缩

8、安装webpack-dev-server

npm install --save-dev webpack webpack-dev-server

const Webpack = require('webpack');

const WebpackDevServer = require('webpack-dev-server');

9、进行打包之后,启动项目:

"scripts": {

"test": "mocha",

"start": "webpack-dev-server",

"dev": "webpack --mode development"

},// 在package.json 里面进行配置

// 然后执行

npm run start // 项目启动&热更新

npm run dev // 再次打包

npm run test // 执行测试

以上就是关于“webpack打包流程是什么”这篇文章的内容,相信大家都有了一定的了解,希望小编分享的内容对大家有帮助,若想了解更多相关的知识内容,请关注亿速云行业资讯频道。

推荐阅读:
  1. webpack打包初识
  2. 怎么用webpack打包layui

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

webpack

上一篇:数据库设计中反映用户对数据要求的模式叫什么

下一篇:win7 exe打不开如何解决

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》