美文网首页Webpack教程入门
打包工具之Webpack(一):安装与使用

打包工具之Webpack(一):安装与使用

作者: wsgdiv | 来源:发表于2020-11-30 00:26 被阅读0次

安装

在安装webpack之前,需先要安装node

安装最新稳定版 npm i -D webpack

安装指定版本 npm i -D webpack@<version>

安装最新体验版 npm i -D webpack@beta

安装到全局 npm i -g webpack

使用

通过CommonJS规范导入导出,即module.exports=xxx;和require.
'''
const path = require('path');
module.exports = {
entry:'./main.js', //执行文件入口
output:{
filename:'bundle.js',
path:path.resolve(__dirname,'./dist'), //输出文件存放地址
},
module:{
rules:[
{
test:/.css$/, //正则匹配所需css文件
use:['style-loader','css-loader?minimize'], //从右往左,且压缩。需安装插件npm i -D style-loader css-loader
}
]
},
plugins:[ //注入钩子,增加功能
]
};
'''
把所有文件通过执行文件入口串联起来,正则筛选各类型代码进行相关处理,生成一个js文件。

相关工具

npm i -D webpack-dev-server 使用DevServer:提供HTTP服务、模块热替换(--hot)、Source Map映射代码(--devtool source-map)

相关文章

  • Webpack 入门教程

    Webpack 是一个前端资源加载/打包工具。 安装 Webpack 使用 cnpm 安装 webpack: 创建...

  • webpack安装

    安装 webpack 是一个使用Node.js实现的一个模块化代码打包工具。所以,需要先安装webpack,安装之...

  • element-ui

    一、安装 ¶ 1、npm 安装 推荐使用 npm 的方式安装,它能更好地和 webpack 打包工具配合使用。 ...

  • vue脚手架中引入Element-UI

    安装 npm 安装 推荐使用 npm 的方式安装,它能更好地和 webpack 打包工具配合使用。 安装是否成功请...

  • 打包工具之Webpack(一):安装与使用

    安装 在安装webpack之前,需先要安装node 安装最新稳定版 npm i -D webpack 安装指定版...

  • 在vue中安装、使用elementUI框架

    npm 安装 推荐使用 npm 的方式安装,它能更好地和 webpack 打包工具配合使用。 ¶CDN 目前可以通...

  • 开源GIS与Vue结合

    相关插件安装 推荐使用npm的方式安装,它能更好地和 webpack 打包工具配合使用。 ¶1、ol-----Op...

  • webpack

    安装webpack并使用打包 一全局打包 webpack .\src\main.js .\dist\bundle...

  • 一篇文章带你了解JavaScript中的面向 “对象”

    作者 | Jeskson 来源 | 达达前端小酒馆 安装webpack,打包工具,安装webpack-dev-...

  • webpack3

    前端自动化打包工具1、安装 webpack 此文档使用webpack版本为 3.4.1,在你自行测试中,可能输出结...

网友评论

    本文标题:打包工具之Webpack(一):安装与使用

    本文链接:https://www.haomeiwen.com/subject/zwnkwktx.html