├── .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 | --------------------------------------------------------------------------------