云社区 博客 博客详情

webpack入门

SegmentFault思否 发表于 2020-11-04 00:57:09 2020-11-04
0
0

【摘要】 npm init -y 生成packge.json。npm i webpack webpack-cli -D,这时候可以npx webpack打包。packge.json文件script中加入"dev": "webpack --config webpack.config.js"新建webpack.config.jsconst path = require("path"); ...
  1. npm init -y 生成packge.json。
  2. npm i webpack webpack-cli -D,这时候可以npx webpack打包。
  3. packge.json文件script中加入
"dev": "webpack --config webpack.config.js"

新建webpack.config.js

const path = require("path");   // webpack内部方法path组件
module.exports = { entry: "./main.js", // 入口文件指定 output: { //出口文件配置 配置出口打包路径 filename: "index.js", //打包后的文件名称 path: path.resolve(__dirname, "dist") //resolve绝对路径引入
 }
};

配置完这2个文件就可以直接 npm run dev打包了
4.打包时自动生成index.html
npm i -D html-webpack-plugin
webpack.config.js中加入

// index.html生成插件
const HtmlWebPackPlugin = require("html-webpack-plugin"); module.exports = { plugins: [ new HtmlWebPackPlugin({ filename: "index.html", // 生成打包文件名 template: "./index.html", // 模板路径 minify: { //生产模式可以进行配置 removeAttributeQuotes: true, //删除 html文件双引号 collapseWhitespace: true //折叠控行 }, hash:true, //添加哈希值~~~~ }) ],
}

5.css模块,css以行内的方式插入到head中
npm i -D --save css-loader style-loader
webpack.config.js中加入

module.exports = { module: { rules: [ { test: /.css$/, use: ["style-loader", "css-loader"] // 执行顺序右->左,下->上 } ] }
}

6.css抽离,css以link标签方式插入到head里
npm i -D --save mini-css-extract-plugin

const MinCssExtractPlugin = require("mini-css-extract-plugin"); // css抽离插件

module.exports = { plugins: [ new MinCssExtractPlugin({ filename: "index.css", }) ], module: { rules: [ { test: /.css$/, use: [ MinCssExtractPlugin.loader, "css-loader" ] // 执行顺序右->左,下->上 } ] }
}

7.打包图片
css背景图
npm i -D url-loader
webpack.config.js中加入

module.exports = { module: { rules: [ { test: /.(png|svg|jpg|gif)$/, use: [ loader: 'url-loader?limit=8192&name=images/[hash:8].[name].[ext]', ] }, ] }
}

js
main.js中加入

import vue from './src/img/vue.png'

window.onload = function(){ var root = document.getElementById('root'); var image = new Image(); // 创建img标签 image.src = vue; // 将img的src属性设置成我们引入的图片 root.append(image);
}

html
npm i -D html-withimg-loader
webpack.config.js中加入

module.exports = { module: { rules: [ { test: /.(html|htm)$/i, use: ['html-withimg-loader'] // 解析html中的图片资源 }, { test: /.(png|svg|jpg|gif)$/, use: [ loader: 'url-loader, options: { esModule: false } ] }, ] }
}

文章来源: segmentfault.com,作者:青棘,版权归原作者所有,如需转载,请联系作者。

原文链接:segmentfault.com/a/1190000037703215

登录后可下载附件,请登录或者注册

【版权声明】本文为华为云社区用户转载文章,如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件至:huaweicloud.bbs@huawei.com进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容。
评论文章 //点赞 收藏 0
点赞
分享文章到微博
分享文章到朋友圈

上一篇:开源就要彻底,从技术创新和设计思想认识 TDengine

下一篇:mysql锁等待超时排查

评论 (0)


登录后可评论,请 登录注册

评论