webapck打包上线
npm i webpack -g
npm i webpack-cli -g
const webpack = require(‘webpack‘);
const HtmlWebpackPlugin= require(‘html-webpack-plugin‘); //1.引入插件
const {CleanWebpackPlugin} = require(‘clean-webpack-plugin‘);
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const path = require(‘path‘);
module.exports = {
mode: "development", //模式
entry: "./src/index.js", //入口
output: {
filename: "bundle.js",
path: path.resolve(__dirname, "dists")
},
module: {
rules: [
{
test: /\.(css|scss)$/,
use: [
MiniCssExtractPlugin.loader,
//"style-loader", //把css模块插入到页面
"css-loader", //把css文件转换为webpack可以识别的js模块
"sass-loader" //把scss 转换 css
]
},
{
test: /\.(eot|svg|ttf|woff|woff2)$/, //icon
use: ["file-loader"]
},
// {
// test: /\.(jpg|jpeg|gif)$/, //打包图片
// use: ["file-loader"],
// }
{
test: /\.(jpg|jpeg|gif)$/, //打包图片
use: [
{
loader: "file-loader",
options: {
//[name] 占位符
name: "[name].[ext]"
}
}
]
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: "./src/index.html" //以index.html为模板创建html
}), //2.调用插件
new CleanWebpackPlugin(),
new MiniCssExtractPlugin()
]
};
pageack.json
{
"name": "webpack-demo",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"webpack": "webpack --config webpack.config.js --progress --display-modules ---colors"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"clean-webpack-plugin": "^3.0.0",
"css-loader": "^3.4.2",
"style-loader": "^1.1.3"
},
"devDependencies": {
"file-loader": "^5.1.0",
"html-webpack-plugin": "^3.2.0",
"mini-css-extract-plugin": "^0.9.0",
"node-sass": "^4.13.1",
"sass-loader": "^8.0.2",
"webpack": "^4.46.0",
"webpack-cli": "^3.3.12"
}
}
终端运行代码
"webpack": "webpack --config webpack.config.js --progress --display-modules ---colors"
npm run webapck
（1）问题1： webpack-cli不存在
解决方案，执行命令：npm install webpack-cli -g