NPM 和webpack 的基础使用
NPM 的基本使用
npm i (安装)
npm i -g (全局安装)
npm i -g jquery -S 生产环境
npm i jquery -D 开发模式
WebPack 的使用
初始化项目 进入项目文件中
npm init -y 初始化一个项目文件夹
安装webpack到开发环境 三个内容
npm i -g webpack webpack-cli webpack-dev-server -D
- 在项目文件中创建 src 目录 src > index.js 创建入口文件
- 打包没有配置配置文件的情况下 打完包会在项目下生成dist文件夹 下面会有 main.js 入口文件
- node dist/main 可以运行项目 也可以在html中用<script src="dist/main.js"></script>引入使用
webpack —mode development //开发环境
webpack —mode production //生产环境
- 安装使用html 插件
npm i html-webpack-plugin -D
- 安装 css 插件
npm i css-loader style-loader -D
- 安装打包css到独立文件的插件
npm i -D mini-css-extract-plugin
-
css兼容处理
-
安装资源 npm i postcss-loader postcss-preset-env -D
-
项目文件夹下创建 postcss.config.js
module.exports = {
plugins: [
require('postcss-preset-env')()
]
}
-
项目文件夹下的 package.json中添加
```javascript
“browserslist”: [
"> 0.2%",
"last 2 versions",
"not dead"
]
```
-
-
处理图片 npm i url-loader file-loader html-withimg-loader -D
-
处理css中的图片 直接用url()方法
#div{
background-image:url("../image/1.png")
}
-
html中使用图片 需要安装 html-withimg-loader
-
-
压缩CSS npm install css-minimizer-webpack-plugin -D
-
Less需要使用npm下载less包和less-loader
-
Sass需要使用npm下载node-sass包和sass-loader
npm i node-sass sass-loader -D
注意 创建sass文件时 是创建 index.scss
//在需要打包的 js 中引入样式 此处为cart.js
require('./base.css'); // 引入css样式
require('./eduwork.css'); // 引入css样式
require('./index.css'); // 引入css样式
require('./list.css'); // 引入css样式
require('./info.css'); // 引入css样式
require('./cart.css'); // 引入css样式
require("./index.scss"); //引入sass
- 配置文件
在项目目录下 手动创建 webpack.config.js 为webpack的配置文件
var {resolve} =require('path');
//引用html 插件
var htmlWebpackPlugin = require("html-webpack-plugin");
//引入打包css到独立文件的插件
var miniCssExtractPlugin=require('mini-css-extract-plugin');
//引入压缩css插件
var cssMinimizerWebpackPlugin = require('css-minimizer-webpack-plugin');
module.exports = {
//打包开始的入口文件
//可以是单个
//entry:"./src/index.js",
//也可以是多个(数组) 会打包在一个入口文件中
//entry:["./src/index.js","./src/index2.js"]
//还可以是对象模式 这时会生成多个入口文件main.js和index.js
entry: {
index: "./src/index.js"
},
//打包后路径
output: {
//输出的入口文件名 单个入口
//"filename":"main.js",
//输出的入口文件名 多个入口
"filename": "[name].js",
//打包后的文件夹名
"path": resolve(__dirname, 'dist')
},
plugins: [
//使用html插件
new htmlWebpackPlugin({
//使用的html文件
template: "./src/index.html",
//输出的html文件名
filename: "index.html",
//可以 在输出的index.html 中引用指定js 对应entry 中的key
chunks: ['index'],
minify: {
//移除空格
collapseWhitespace: true,
//移除注释
removeComment: true
},
}),
//创建 打包css到独立文件夹下的插件 对象
new miniCssExtractPlugin({
filename:'css/[name].css' //输出的css文件名,放置在dist/css目录下
}),
//创建 压缩css 对象
new cssMinimizerWebpackPlugin()
],
module: {
rules: [
//处理css
{
// 正则表达式,表示.css后缀的文件
test: /\.css$/,
// 针对css文件使用的loader,注意有先后顺序,数组项越靠后越先执行
use: [
//css打包成独立文件
{
loader: miniCssExtractPlugin.loader
} ,
//css处理插件
'css-loader',
//css兼容性处理
'postcss-loader'
]
// use: ['style-loader','css-loader'] //style-loader类似打包到html中
},
//处理图片
{
test: /\.(png|jpg|jpeg|gif)$/,
use: [
{
loader: 'url-loader',
options: {
// publicPath: './img/', //会在html的地址前加上这个
outputPath: 'img/',
limit: 1024 * 8,
name:'[name][hash:8].[ext]',
esModule: false
}
}
],
},
// html加载图片
{
test:/\.(html)$/i,
use:'html-withimg-loader', // 解析 html中的图片资源
},
//处理其他非js|json|html|css|less|scss|png|gif|jpg|jpeg文件
{
exclude: /\.(js|json|html|css|less|scss|png|gif|jpg|jpeg)$/,
loader: 'file-loader',
options: {
outputPath: 'font/',
publicPath: './font',
name:'[name][hash:8].[ext]'
}
},
//处理sass
{
// 正则表达式,表示.css后缀的文件
test: /\.scss$/,
// 针对css文件使用的loader,注意有先后顺序,数组项越靠后越先执行
use: [
//css打包成独立文件
{
loader: miniCssExtractPlugin.loader
} ,
//css处理插件
'css-loader',
//css兼容性处理
'postcss-loader',
'sass-loader'
]
// use: ['style-loader','css-loader'] //style-loader类似打包到html中
},
]
},
//默认打包方式 开发模式 | production 生产模式
mode:'development',
//服务器启动 npx webpack serve
devServer: {
port:8080,
compress:true,
open:true,
hot:true
},
//生产模式打包时文件过大导致报错
performance: {
hints:'warning',
//入口起点的最大体积
maxEntrypointSize: 50000000,
//生成文件的最大体积
maxAssetSize: 30000000
},
//服务器启动后自动刷新
target: "web",
};
启动 webServe
npx webpack serve