-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
8 changed files
with
287 additions
and
51 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,7 +1,3 @@ | ||
| <!DOCTYPE html><html lang=en><head><meta charset=UTF-8><meta name=viewport content="width=device-width,initial-scale=1"><meta http-equiv=X-UA-Compatible content="ie=edge"><title>Document</title></head><style> | ||
| body { | ||
| <!DOCTYPE html><html lang=en><head><meta charset=UTF-8><meta name=viewport content="width=device-width,initial-scale=1"><meta http-equiv=X-UA-Compatible content="ie=edge"><title>Document</title><link href=main.css?0e0511d429e2874fbc68 rel=stylesheet></head><style>body { | ||
| background: pink | ||
| } | ||
| </style><body> | ||
| <div>12345</div> | ||
| <script type=text/javascript src=bundle.js?35f42786db5465f0e2d3></script></body></html> | ||
| }</style><body><div>12345</div><script type=text/javascript src=bundle.js?0e0511d429e2874fbc68></script></body></html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,11 @@ | ||
| body { | ||
| font-size: 16px; | ||
| background: red; | ||
| } | ||
| body { | ||
| background: #faf; | ||
| } | ||
| body div { | ||
| border: 1px solid #fdafaf; | ||
| } | ||
|
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,65 @@ | ||
| let path = require("path"); | ||
| let HtmlWebpackPlugin = require("html-webpack-plugin"); | ||
|
|
||
| module.exports = { | ||
| devServer: { | ||
| // 开发服务器配置 webpack-dev-server | ||
| // 起服务构建的时候需要html文件，否则不会显示页面，只会显示路径 | ||
| port: 3000, | ||
| progress: true, | ||
| contentBase: "./build" | ||
| }, | ||
|
|
||
| mode: "development", | ||
| entry: "./src/index.js", | ||
| output: { | ||
| filename: "bundle.js", //打包后的文件名 | ||
| path: path.resolve(__dirname, "./build") // 路径必须是一个绝对路径 | ||
| }, | ||
|
|
||
| plugins: [ | ||
| // 所有webpack 插件 | ||
| new HtmlWebpackPlugin({ | ||
| template: "./src/index.html", //模板 | ||
| filename: "index.html", //文件名 | ||
| hash: true, | ||
| minify: { | ||
| // 压缩 | ||
| removeAttributeQuotes: true, //删除属性双引号 | ||
| collapseWhitespace: true //折叠为一行 | ||
| } | ||
| }) | ||
| ], | ||
| module: { | ||
| rules: [ | ||
| // 规则 css-loader 解析 @import语法 | ||
| { | ||
| test: /.css$/, | ||
| // 多个loader 需要 [],从右向左执行 | ||
| use: [ | ||
| // loader 变为对象之后可以多传参数 | ||
| { | ||
| loader: "style-loader", | ||
| options: { //将样式插入顶部，优先级为最小 | ||
| insertAt: 'top' | ||
| } | ||
| }, | ||
| "css-loader" | ||
| ] | ||
| }, | ||
| { | ||
| test: /.less$/, | ||
| use: [ | ||
| { | ||
| loader: "style-loader", | ||
| options: { | ||
| insertAt: 'top' | ||
| } | ||
| }, | ||
| "css-loader", | ||
| "less-loader" //从右至左加载 | ||
| ] | ||
| } | ||
| ] | ||
| } | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,5 +1,6 @@ | ||
| body{ | ||
| div{ | ||
| border: 1px solid #fdafaf; | ||
| transform: rotate(45deg); | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,65 +1,49 @@ | ||
| let path = require("path"); | ||
| let HtmlWebpackPlugin = require("html-webpack-plugin"); | ||
| let MiniCssExtractPlugin = require("mini-css-extract-plugin"); | ||
|
|
||
| module.exports = { | ||
| devServer: { | ||
| // 开发服务器配置 webpack-dev-server | ||
| // 起服务构建的时候需要html文件，否则不会显示页面，只会显示路径 | ||
| port: 3000, | ||
| progress: true, | ||
| contentBase: "./build" | ||
| }, | ||
|
|
||
| mode: "development", | ||
| entry: "./src/index.js", | ||
| output: { | ||
| filename: "bundle.js", //打包后的文件名 | ||
| path: path.resolve(__dirname, "./build") // 路径必须是一个绝对路径 | ||
| filename: "bundle.js", | ||
| path: path.resolve(__dirname, "./build") | ||
| }, | ||
|
|
||
| plugins: [ | ||
| // 所有webpack 插件 | ||
| new HtmlWebpackPlugin({ | ||
| template: "./src/index.html", //模板 | ||
| filename: "index.html", //文件名 | ||
| template: "./src/index.html", | ||
| filename: "index.html", | ||
| hash: true, | ||
| minify: { | ||
| // 压缩 | ||
| removeAttributeQuotes: true, //删除属性双引号 | ||
| collapseWhitespace: true //折叠为一行 | ||
| removeAttributeQuotes: true, | ||
| collapseWhitespace: true | ||
| } | ||
| }), | ||
| //把公用的css抽用成一个css文件 | ||
| new MiniCssExtractPlugin({ | ||
| filename: "main.css" | ||
| }) | ||
| ], | ||
| module: { | ||
| rules: [ | ||
| // 规则 css-loader 解析 @import语法 | ||
| { | ||
| test: /.css$/, | ||
| // 多个loader 需要 [],从右向左执行 | ||
| use: [ | ||
| // loader 变为对象之后可以多传参数 | ||
| { | ||
| loader: "style-loader", | ||
| options: { //将样式插入顶部，优先级为最小 | ||
| insertAt: 'top' | ||
| } | ||
| }, | ||
| "css-loader" | ||
| ] | ||
| }, | ||
| { | ||
| test: /.less$/, | ||
| use: [ | ||
| { | ||
| loader: "style-loader", | ||
| options: { | ||
| insertAt: 'top' | ||
| } | ||
| }, | ||
| "css-loader", | ||
| "less-loader" //从右至左加载 | ||
| ] | ||
| } | ||
| MiniCssExtractPlugin.loader, | ||
| "postcss-loader", //autoprefixer 自动加上浏览器前缀 | ||
| "css-loader" | ||
| ] | ||
| }, | ||
| { | ||
| test: /.less$/, | ||
| use: [ | ||
| MiniCssExtractPlugin.loader, | ||
| "css-loader", | ||
| "postcss-loader", | ||
| "less-loader" | ||
| ] | ||
| } | ||
| ] | ||
| } | ||
| }; |
Oops, something went wrong.