1、首先安装webpack,如果你使用 webpack 4+ 版本,你还需要安装 CLI。
npm install --save-dev webpack@<version>
npm install --save-dev webpack-cli
在package.json的scripts属性里面配置快捷指令
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack",
}
2、通过配置webpack-dev-server实现自动打包,需要使用3.x版本,不然会跟webpack-cli冲突报错
npm install webpack-dev-server --save-dev
通过package.json的scripts属性配置webpack-dev-server的启动命令:
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack",
"webS": "webpack-dev-server --open --host 127.0.0.1 --port 8888"
}
3、通过html-webpack-plugin生成预览页面:通过在dist目录下生成一个临时index.html文件,启动webpack-dev-server时会自动打开这个文件
npm i html-webpack-plugin
在webpack.config.js中对html-webpack-plugin进行配置
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const htmlPlugin = new HtmlWebpackPlugin({
template: "./src/index.html",
filename: "index.html",
});
module.exports = {
entry: path.resolve(__dirname, "./src/index.js"),
mode: "development",
output: {
filename: "main.js",
path: path.resolve(__dirname, "dist"),
},
plugins: [htmlPlugin]
};
4、通过css-loader、style-loader实现以模块化的形式载入css文件
npm install --save-dev style-loader css-loader
在webpack.config.js中进行配置
module.exports = {
module: {
rules: [
{
test: /\.css$/,
use: ["style-loader", "css-loader"],
}
],
},
};
5、通过less-loader、less实现以模块化的形式载入less文件
$ npm install less less-loader --save-dev
在webpack.config.js中进行配置
module: {
rules: [
{
test: /\.less$/,
use: ["style-loader", "css-loader", "less-loader"], // compiles Less to CSS
}
],
},
6、通过sass-loader、sass实现以模块化的形式载入less文件
npm install sass-loader sass --save-dev
在webpack.config.js中进行配置
module: {
rules: [
{
test: /\.s[ac]ss$/i,
use: [
// Creates `style` nodes from JS strings
"style-loader",
// Translates CSS into CommonJS
"css-loader",
// Compiles Sass to CSS
"sass-loader",
],
},
],
},
7、通过autoprefixer、postcss-loader实现自动添加浏览器前缀
npm install autoprefixer postcss-loader --save-dev
通过postcss.config.js进行配置
module.exports = {
plugins: [require("autoprefixer")],
};
并在webpack.config.js中进行配置
module: {
rules: [
{
test: /\.css$/,
use: ["style-loader", "css-loader", "postcss-loader"],
},
}
8、通过url-loader、file-loader打包css中的字体和图片
npm install url-loader file-loader --save-dev
并在webpack.config.js中进行配置,其中 ? 之后的是 loader 的参数项。 limit 用来指定图片的大小,单位是字节(byte),只有小于 limit 大小的图片,才会被转为 base64 图片
module: {
rules: [
{
test: /\.jpg|png|gif|bmp|ttf|eot|svg|woff|woff2$/,
use: 'url-loader?limit=16940'
}
]
}
9、通过babel使用js高级语法
(1)安装babel转换器相关的包:
npm i babel-loader @babel/core @babel/runtime -D
(2)安装babel语法插件相关的包:
npm i @babel/preset-env @babel/plugin-transformruntime @babel/plugin-proposal-class-properties –D
配置babel.config.js文件
module.exports = {
presets: [ '@babel/preset-env' ],
plugins: [ '@babel/plugin-transform-runtime', '@babel/plugin-proposalclass-properties’ ]
}
配置webpack.config.js文件:exclude 为排除项,表示 babel-loader 不需要处理 node_modules 中的 js 文件
module: {
rules: [
{ test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ }
]
}
原文地址:https://blog.csdn.net/z1844306480/article/details/113791497
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。