webpackwebpack作用webpack的功能安装webpack打出一个安装包的版本号本地预览创建一个packag

webpack

是一个现代JavasScript应用程序的模块打包器(module bunder)

作用

将sass/less 等预编译的css语言转换成浏览器识别的css文件
能够将多个预编译文件打包成一个文件
打包image/styles/assets/scrips/等前端常用的文件
搭建开发环境开启服务器
监视文件改动,热部署
将单文件组件(*.vue)类型的文件，转化成浏览器识别的内容

webpack的功能

安装webpack

npm  i -g webpack@4 webpack-cli@4

打出一个安装包的版本号

npm inof webpack

本地预览

webpack-dev-server

创建一个package.json

npm init -p

本地安装webpack

yarn add webpack webpack-cli --dev

调用本地安装的webpack

./node_modules/.bin/webpack --version
npx webpack

切换模式

module.exports ={
  mode: 'development'           开发者模式，开发时使用
  mode: 'production'            发布模式，给用户使用，无注释
}

入口（从哪个文件生成）

entry: './src/index.js'

出口（生成哪个文件）

output:{ filename: 'index.js' }

文件名中hash的意思

filename: '[name].[contenthash].js'
生成随机数名字的CSS,JS文件，可以缓存;在HTTP中缓存头中设置:Cache-Control

用webpack生成HTML

安装HTML文件

yarn add html-webpack-plugin --dev

引入安装的文件

const HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require('path');

module.exports = {
    plugins: [
        new HtmlWebpackPlugin({
            title: "前端开发",
            template: "src/assets/index.html"
        })
    ],
}

用webpack引入css

安装CSS需要的文件

yarn add css-loader --dev
yarn add style-loader --dev

原理

任何以css为结尾的文件,用css-loader去处理文件，读到JS里
style-loader 把 css-loader 读到的东西变成style标签放到head里

可以使用JS生成style，也可以把CSS抽成文件

module: {
        rules: [
            {
                test: /\.css$/i,
                use: [
                    "style-loader",
                    "css-loader",
                ]
            }
        ]
    }

yarn add mini-css-extract-plugun --dev
把css抽成文件（生成可以缓存的css文件）

运行build命令2种方法

yarn build
npm run build

创建build命令

"script":{"build":"rm -rf dist && webpack"}

"build": "rm -rf dist && webpack --config webpack.config.prod.js",

base 继承

...base
把base的所有属性抄过来，跨文件
...base.plugin  
在之前的plugin基础上继续添加属性

引入SCSS

yarn add sass-loader dart-sass --dev

引入less

yarn add less-loader --dev

引入stylus

yarn add stylus-loader stylus --dev

引入图片

yarn add file-loader --dev
把文件变成文件路径

生产环境上线代码

yarn build
rm -rf dist && webpack

部署环境开发

yarn start
webpack-dev-server

练习代码

详细资料点击：webpack 文档