├── .babelrc
├── .gitattributes
├── .gitignore
├── README.md
├── dist
├── entry.js
├── images
│ └── 45157dee8f437856a9ad8305287d89cb.jpg
└── index.html
├── package-lock.json
├── package.json
├── postcss.config.js
├── src
├── images
│ └── test.jpg
├── index.css
├── index.html
├── index.js
└── less.less
└── webpack.config.js
/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 | "presets": [
3 | [
4 | "env",
5 | {
6 | "targets": {
7 | "browsers": ["last 2 versions"]
8 | }
9 | }
10 | ]
11 | ],
12 | "plugins": ["transform-runtime"]
13 | }
--------------------------------------------------------------------------------
/.gitattributes:
--------------------------------------------------------------------------------
1 | # Auto detect text files and perform LF normalization
2 | * text=auto
3 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # webpack_learningPath
2 |
3 | ## 1,webpack-dev-server 启动方式(2 种)
4 |
5 | 1. /webpack.config.js : module.exports.devServer:{contentBase: path.join(\_\_dirname, "dist")} => \$ node_modules/.bin/webpack-dev-server
6 | 2. /package.json : "scripts": {"server":"webpack-dev-server"} => \$ npm run server
7 |
8 | ## 2,html 打包插件:html-webpack-plugin
9 |
10 | 1. \$ npm install -S-D html-webpack-plugin
11 | 2. /webpack.config.js : const htmlPlugin= require('html-webpack-plugin') 详情见配置文件
12 |
13 | ## 3,css-loader:style-loader(处理 css 文件中的 url) css-loader(将 css 插入到页面中 style 标签)
14 |
15 | 1. \$ npm install -S-D style-loader css-loader
16 | 2. /webpack.config.js : 详情见配置文件
17 |
18 | ## 4,css 中的图片处理:file-loader、url-loader
19 |
20 | 1. \$ npm install -S-D file-loader url-loader
21 | 2. file-loader:解决引用路径的问题,file-loader 可以解析项目中的 url 引入(不仅限于 css)
22 | 3. url-loader:如果图片较多,会发很多 http 请求,会降低页面性能。url-loader 会将引入的图片编码(base64),生成 dataURl。url-loader 提供了一个 limit 参数,小于 limit 字节的文件会被转为 DataURl,大于 limit 的还会使用 file-loader 进行 copy。
23 | 4. /webpack.config.js 详情见配置文件
24 |
25 | ## 5,CSS 分离与图片路径处理(webpack 官方并不建议这样作,他们认为 CSS 就应该打包到 JavasScript 当中以减少 http 的请求数。看业务需求)
26 |
27 | 1. \$ npm install -S-D extract-text-webpack-plugin
28 | 2. /webpack.config.js : 设置 Plugins 修改原来我们的 style-loader 和 css-loader 详情见配置文件
29 | 3. webpack 目前已升级 V4,而相应的 extract-text-webpack-plugin 并不能兼容,因此安装是需要使用测试版 : npm install -S-D extract-text-webpack-plugin@next,临时解决还需要继续观察
30 |
31 | ## 6,修改打包后图片路径;处理 HTML 中的图片(html-withimg-loader)
32 |
33 | 1. /webpack.config.js : 修改配置 module.rules 下的 url-loader 选项的 outputPath
34 | 2. \$ npm install html-withimg-loader -S-D (国人开发,api 易懂)
35 | 3. /webpack.config.js : 配置 loader 详情见配置文件
36 |
37 | ## 7,Less 文件的打包和分离
38 |
39 | 1. \$ npm install -S-D less less-loader
40 | 2. /webpack.config.js - loader 配置见文件
41 | 3. index.js 中 import - less 文件
42 |
43 | ## 8,sass 文件的打包和分离与 less 类似(node-sass sass-loader)
44 |
45 | ## 9,自动处理 CSS3 属性前缀(PostCSS)
46 |
47 | 1. PostCSS 是一个 CSS 的处理平台,自动处理 CSS3 属性前缀是其中的一个功能。
48 | 2. \$ npm install -S-D postcss-loader autoprefixer
49 | 3. 新建文件 postcss.config.js
50 | 4. /webpack.config.js - loader 配置
51 |
52 | ## 10,编译 ES6(babel)
53 |
54 | - 需要注意的是, babel-loader 和 babel-polyfill。前者负责语法转化,比如:箭头函数;后者负责内置方法和函数,比如:new Set(),babel 和相关的技术生态:
55 |
56 | 1. babel-loader: 负责 es6 语法转化
57 | 2. babel-preset-env: 包含 es6、7 等版本的语法转化规则
58 | 3. babel-polyfill: es6 内置方法和函数转化垫片
59 | 4. babel-plugin-transform-runtime: 避免 polyfill 污染全局变量
60 |
61 | - 安装相关库
62 |
63 | ```json
64 | {
65 | "devDependencies": {
66 | "babel-core": "^6.26.3",
67 | "babel-loader": "^7.1.5",
68 | "babel-plugin-transform-runtime": "^6.23.0",
69 | "babel-preset-env": "^1.7.0",
70 | "webpack": "^4.15.1"
71 | },
72 | "dependencies": {
73 | "babel-polyfill": "^6.26.0",
74 | "babel-runtime": "^6.26.0"
75 | }
76 | }
77 | ```
78 |
79 | - webpack 中配置使用 babel
80 | - babel 的相关配置,推荐单独写在.babelrc 文件中。
81 | - 在 webpack 配置文件中,关于 babel 的调用需要写在 module 模块中。对于相关的匹配规则,除了匹配 js 结尾的文件,还应该去除 node_module/文件夹下的第三库的文件
82 | - 配置 babel-polyfill,需要在项目的入口文件中被引入,或者在 webpack.config.js 中配置。
83 |
--------------------------------------------------------------------------------
/dist/images/45157dee8f437856a9ad8305287d89cb.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/elizond0/webpack4_learningPath/155f25cb1dc402bea18a7f9964b9bfa451dda4e2/dist/images/45157dee8f437856a9ad8305287d89cb.jpg
--------------------------------------------------------------------------------
/dist/index.html:
--------------------------------------------------------------------------------
1 |
webpack
23213
23213
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "webpack_learningPath",
3 | "version": "1.0.0",
4 | "description": "",
5 | "main": "index.js",
6 | "scripts": {
7 | "test": "echo \"Error: no test specified\" && exit 1",
8 | "server": "webpack-dev-server",
9 | "dev": "webpack --mode development",
10 | "build": "webpack --mode production"
11 | },
12 | "keywords": [],
13 | "author": "",
14 | "license": "ISC",
15 | "dependencies": {
16 | "autoprefixer": "^8.1.0",
17 | "css-loader": "^0.28.10",
18 | "extract-text-webpack-plugin": "^4.0.0-beta.0",
19 | "file-loader": "^1.1.11",
20 | "hoek": "^5.0.3",
21 | "html-webpack-plugin": "^3.0.6",
22 | "html-withimg-loader": "^0.1.16",
23 | "less": "^3.9.0",
24 | "less-loader": "^4.1.0",
25 | "npm-check-updates": "^2.14.2",
26 | "style-loader": "^0.20.3",
27 | "url-loader": "^1.0.1",
28 | "webpack": "^4.32.2",
29 | "webpack-cli": "^2.0.12",
30 | "webpack-dev-server": "^3.4.1",
31 | "babel-polyfill": "^6.26.0",
32 | "babel-runtime": "^6.26.0"
33 | },
34 | "devDependencies": {
35 | "cssnano": "^4.1.10",
36 | "postcss-import": "^12.0.1",
37 | "postcss-load-config": "^2.0.0",
38 | "postcss-loader": "^2.1.6",
39 | "postcss-plugin": "^1.0.0",
40 | "postcss-preset-env": "^6.6.0",
41 | "babel-core": "^6.26.3",
42 | "babel-loader": "^7.1.5",
43 | "babel-plugin-transform-runtime": "^6.23.0",
44 | "babel-preset-env": "^1.7.0",
45 | "webpack": "^4.15.1"
46 | }
47 | }
--------------------------------------------------------------------------------
/postcss.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | // parser: "sugarss",
3 | plugins: [
4 | require("autoprefixer") //引入autoprefixer插件
5 | ]
6 | };
7 |
--------------------------------------------------------------------------------
/src/images/test.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/elizond0/webpack4_learningPath/155f25cb1dc402bea18a7f9964b9bfa451dda4e2/src/images/test.jpg
--------------------------------------------------------------------------------
/src/index.css:
--------------------------------------------------------------------------------
1 | body {
2 | color: red;
3 | }
4 |
5 | #title2 {
6 | background-image: url("./images/test.jpg");
7 | width: 300px;
8 | height: 300px
9 | }
--------------------------------------------------------------------------------
/src/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | webpack
8 |
9 |
10 |
11 | 23213
12 | 23213
13 |
14 |
15 |
16 |
--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | import "babel-polyfill";
2 |
3 | import css from "./index.css";
4 | // import css from './less.less'
5 | document.getElementById("title").innerHTML = "index.js";
6 | setTimeout(() => {
7 | // alert("sdasdasdasd");
8 | // console.clear();
9 | // console.log("----------------1秒后--------------------");
10 | }, 1000);
11 |
--------------------------------------------------------------------------------
/src/less.less:
--------------------------------------------------------------------------------
1 | @color :#000;
2 | #title3{
3 | width:300px;
4 | height:300px;
5 | color:#fff;
6 | background-color:@color;
7 | }
--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
1 | const path = require("path");
2 | const htmlPlugin = require("html-webpack-plugin");
3 | const extractTextPlugin = require("extract-text-webpack-plugin");
4 |
5 | module.exports = {
6 | entry: {
7 | entry: "./src/index.js"
8 | },
9 | output: {
10 | //output主要是用于处理静态文件路径
11 | path: path.resolve(__dirname, "dist"), //path必须引入,node模块
12 | filename: "[name].js", //[name]表示与entry对象下的key值对应,即entry/entry2
13 | publicPath: "http://localhost:9000/" //用于解决分离后css路径不正确,js引用路径或者CDN地址
14 | },
15 | devServer: {
16 | contentBase: path.join(__dirname, "dist"),
17 | compress: true, //是否gzip压缩
18 | port: 9000
19 | },
20 | module: {
21 | rules: [
22 | {
23 | //css-loader配置
24 | test: /\.css$/,
25 | use: [
26 | //loader也会有use的写法
27 | "style-loader",
28 | { loader: "css-loader", options: { importLoaders: 1 } },
29 | "postcss-loader"
30 | ]
31 | // use: extractTextPlugin.extract({
32 | // //用于css分离
33 | // fallback: "style-loader", //当css没有被提取,调用XXloader
34 | // use: "css-loader"
35 | // })
36 | },
37 | {
38 | //url-loader配置,url-loader内置了file-loader
39 | test: /\.(png|jpg|gif)$/, //匹配图片后缀
40 | use: [
41 | {
42 | loader: "url-loader",
43 | options: {
44 | limit: 8192, //单位是B
45 | outputPath: "images/" //打包后的图片放到dist/images文件夹下
46 | }
47 | }
48 | ]
49 | },
50 | {
51 | //html文件中img标签的图片处理
52 | test: /\.(htm|html)$/i,
53 | use: ["html-withimg-loader"]
54 | },
55 | // {//less-loader
56 | // test: /\.less$/,
57 | // use: extractTextPlugin.extract({//用于css分离
58 | // fallback: "style-loader",
59 | // use: [
60 | // {
61 | // loader: "css-loader" // translates CSS into CommonJS
62 | // },
63 | // {
64 | // loader: "less-loader" // compiles Less to CSS
65 | // }
66 | // ]
67 | // })
68 | // },
69 | {
70 | test: /\.js$/,
71 | exclude: /(node_modules)/,
72 | use: {
73 | loader: "babel-loader"
74 | }
75 | }
76 | ]
77 | },
78 | plugins: [
79 | new htmlPlugin({
80 | //html打包插件
81 | minify: {
82 | //html文件进行压缩
83 | // removeAttributeQuotes:true//去掉属性的双引号
84 | },
85 | hash: true, //避免缓存JS
86 | template: "./src/index.html" //要打包的html模版路径和文件名称
87 | })
88 | // new extractTextPlugin("css/index.css") // 这是分离后的路径位置 即 dist/css/index.css
89 | ]
90 | };
91 |
--------------------------------------------------------------------------------