26.webpack 入门

webpack

官方：

https://webpack.js.org/
http://webpack.github.io/

中文：

https://www.webpackjs.com/

资料：

https://segmentfault.com/a/1190000006178770

学习入口：

官网----->1 中文文档-->指南
?????2 立即开始
-------------------------------------------------------------

安装webpack:

1、3.x

安装 cnpm i -D webpack@3.8.1
卸载 npm un -D webpack

2、4.x

安装 cnpm i -D webpack webpack-cli

局部安装验证版本：

webpack -v 错误 —— 全局安装

1、node_modules/.bin/webpack -v
2、npx webpack -v
3、工程文件 package.json

"scripts": { ???????"test": "webpack -v" ????},运行npm run test

webpack3 翻译器 ES6-->ES5 babel

webpack src dist

npx webpack js/index.js dist/index.bundle.js

文件不会被压缩！

webpack4 翻译器 ES6-->ES5 babel

webpack --mode=development src -o dist 正确的格式

npx webpack --mode=development js/index.js dist/index.bundle.js --->main.js

npx webpack --mode=development js/index.js --output dist/index.bundle.js

文件会被压缩！

简写:webpack --mode=development

前提条件：
1、源src 必须是 src/index.js
???????输出： 默认 dist/main.js

-------------------------------------------------------------

配置文件：　webpack.config.js

执行：webpack

指定执行某一个具体的文件： 必须带上 --config

webpack --config webpack.dev.config.js

-------------------------------------------------------------

loader:处理资源 ==从右往左进行处理==

cnpm i -D style-loader css-loader

css-loader：加载css文件
style-loader：处理样式 页面生成style标签

sass:
cnpm i -D sass-loader node-sass

less:
cnpm i -D less-loader less
------------------------------------------------------

cnpm i -D url-loader file-loader

file-loader：处理文件 单纯的把文件复制到目标路径 重命名
url-loader 依赖 file-loader :把文件转成base64

exp:

module.exports = { ???mode:"development", ???entry:"./src/index.js", //引入模块 ./ ???output:{ ????????path:`${__dirname}/dist/`, ?//必须是一个绝对路径 ???????filename:"index.bundle.js" ???}, ???module: { ???????rules: [ ???????????{ ????????????????test: /\.css$/, ????????????????use: [‘style-loader‘,‘css-loader‘] ?????????????}, ????????????//sass ???????????{ ????????????????test: /\.scss$/, ????????????????use: [‘style-loader‘,‘css-loader‘,‘sass-loader‘] ????????????}, ???????????//less ???????????{ ????????????????test: /\.less$/, ????????????????use: [‘style-loader‘,‘css-loader‘,‘less-loader‘] ????????????}, ???????????{ ???????????????test: /\.(png|jp(e)?g|gif)$/, ???????????????use: ["url-loader"] ?????????????} ???????] ???}}

model:{ 模块、包 ???????rules:[ //规则 ???????????????{test:/正则/，use:[xxxx-loader]} ?use:使用什么loader进行处理 ???????]}indes.jsimport $ from "jquery";import "./asset/1.css";import img from "./asset/111.jpg"$(function(){ ???$("#div1").click(function(){ ???????//$(this).addClass("active"); ???????// alert(img); ???????$(this).css({ ???????????width:"330px", ???????????height:"495px", ???????????background:`url(${img})` ???????}); ???});});

res:

生成页面 index.html

cnpm i -D html-webpack-plugin

new HtmlWebpackPlugin()

new HtmlWebpackPlugin({ ???//title: ‘My App‘, ???template: ‘public/index.html‘,用户模板文件 ???filename: ‘index.html‘, ?生成的页面 ??可以不写 ?默认就是index.html ???hash:true ?防止js/css缓存})

ExtractTextWebpackPlugin 在 webpack4中被废弃 替换者 mini-css-extract-plugin

cnpm i -D mini-css-extract-plugin

mini-css-extract-plugin++应用场景只在开发阶段++！
++在生产阶段换成 style++

--watch 简写 -w 实时编译 问题 不能主动刷新页面

webpack-dev-server 服务器

不能实时编译，可以实时刷新页面

cnpm i -D webpack-dev-server

webpack.config.js

const webpack = require(‘webpack‘);const path = require("path");const HtmlWebpackPlugin = require(‘html-webpack-plugin‘);const MiniCssExtractPlugin = require("mini-css-extract-plugin");// ?webpack --mode=development src/index.js ?--output dist/main.jsmodule.exports = { ???mode:"development", ???entry:"./src/index.js",//模块 ./ ???output:{ ???????path:path.resolve(__dirname,"dist"),//绝对路径 ???????filename:"main.js" ???}, ???devServer: { ???????contentBase: "./dist", //资源目录 www/public ???????index: ‘main.js‘, ???????host:"localhost", ???????port:9000, ???????open:true,// --open ????????hot: true, ???????compress: true, ?//gzip压缩 ???????// proxy: { ???????// ????‘/api‘: { ???????// ????target: ‘https://other-server.example.com‘, ???????// ????secure: false ???????// ????} ???????// } ???}, ???module: { ???????rules: [ ???????????// { test: /\.css$/, use: ["style-loader","css-loader"] }, ???????????{ ???????????????test: /\.css$/, ???????????????use: [ ?????????????????MiniCssExtractPlugin.loader, ?????????????????"css-loader" ???????????????] ???????????}, ???????????{ test: /\.(png|jp(e)?g|gif|svg|icon)$/,use: ["file-loader"] }, ???????] ???}, ???plugins: [ ???????new webpack.NamedModulesPlugin(), ???????new webpack.HotModuleReplacementPlugin(), ???????new webpack.BannerPlugin(‘版权所有，翻版必究‘), ???????//new HtmlWebpackPlugin() ???????new HtmlWebpackPlugin({ ???????????template: ‘public/index.html‘, ???????????filename: ‘index.html‘, ???????????hash:true ???????}), ???????new MiniCssExtractPlugin({ ???????????filename: "[name].css", ???????????chunkFilename: "[id].css" ???????}) ???????]}

css/url/file/babel/vue-loader

css分离（mini-css-extract-plugin）
HtmlWebpackPlugin
HtmlWebpackPlugin —— Clean...

babel

26.webpack 入门

原文地址：https://www.cnblogs.com/zhongchao666/p/9484314.html