From 5ca2046462ab16cef0139fa0ef085c6de637bcbf Mon Sep 17 00:00:00 2001 From: mr_zhaojie Date: Thu, 13 Dec 2018 12:09:17 +0800 Subject: [PATCH 1/4] bootstrap4 --- README.md | 5 +++ package.json | 7 ++-- src/css/_main.scss | 3 ++ src/index.js | 2 +- src/index.scss | 4 +-- src/login.html | 2 +- webpack.config.js | 61 ++++++++--------------------------- yarn.lock | 80 +++++++++++++++++++++++++++++++++++++++++----- 8 files changed, 103 insertions(+), 61 deletions(-) diff --git a/README.md b/README.md index 6c6128b..357c543 100644 --- a/README.md +++ b/README.md @@ -1,2 +1,7 @@ # webpack-practice webpack系列 +* git clone +* yarn install +* npm run start +* npm run build + diff --git a/package.json b/package.json index 0b1fff5..fe1b203 100644 --- a/package.json +++ b/package.json @@ -12,8 +12,7 @@ "dependencies": { "bootstrap": "^4.1.3", "jquery": "^3.3.1", - "popper.js": "^1.14.6", - "we-validator": "^1.3.9" + "popper.js": "^1.14.6" }, "devDependencies": { "@babel/core": "^7.2.0", @@ -23,12 +22,16 @@ "clean-webpack-plugin": "^1.0.0", "css-loader": "^1.0.1", "extract-text-webpack-plugin": "^4.0.0-beta.0", + "file-loader": "^2.0.0", "html-webpack-plugin": "^3.2.0", + "less": "^3.9.0", + "less-loader": "^4.1.0", "node-sass": "^4.10.0", "postcss-loader": "^3.0.0", "precss": "^4.0.0", "sass-loader": "^7.1.0", "style-loader": "^0.23.1", + "url-loader": "^1.1.2", "webpack": "^4.27.1", "webpack-cli": "^3.1.2", "webpack-dev-server": "^3.1.10" diff --git a/src/css/_main.scss b/src/css/_main.scss index e69de29..44d2786 100644 --- a/src/css/_main.scss +++ b/src/css/_main.scss @@ -0,0 +1,3 @@ +.test { + color: #ccc; +} \ No newline at end of file diff --git a/src/index.js b/src/index.js index 6cc9e06..416a7f7 100644 --- a/src/index.js +++ b/src/index.js @@ -3,4 +3,4 @@ import 'jquery' import './index.scss' import loginValidate from './js/login' -loginValidate(); +loginValidate(); \ No newline at end of file diff --git a/src/index.scss b/src/index.scss index 44643b6..8d6a5bf 100644 --- a/src/index.scss +++ b/src/index.scss @@ -1,2 +1,2 @@ -@import "css/main"; -@import "~bootstrap/scss/bootstrap"; \ No newline at end of file +@import "main"; +@import "../node_modules/bootstrap/scss/bootstrap.scss"; \ No newline at end of file diff --git a/src/login.html b/src/login.html index 2679777..9a72abe 100644 --- a/src/login.html +++ b/src/login.html @@ -11,7 +11,7 @@

用户登录

-
+
diff --git a/webpack.config.js b/webpack.config.js index e7679f8..8df523f 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -5,67 +5,34 @@ const path = require('path'); const webpack = require('webpack'); module.exports = { - entry: './src/index.js', // 打包入口 - // 出口 + entry: './src/index.js', output: { - path: path.resolve(__dirname, 'dist'), // 解析路径为 ./dist + path: path.resolve(__dirname, 'dist'), filename: 'bundle.js' - }, - /** - * 配置解析：配置别名、extensions 自动解析确定的扩展等等 - */ - resolve: {}, - /** - * 开发服务器：run dev/start 的配置，如端口、proxy等 - */ + }, + resolve: {}, devServer: { port: 8088, - open: true, // 自动打开浏览器 - compress: true // 服务器压缩 - }, + open: true, + compress: true + }, module: { rules: [{ - test: /\.(scss)$/, - use: ExtractTextPlugin.extract({ - fallback: 'style-loader', - use: ['css-loader', 'sass-loader'] - }) - // use: [{ - // loader: 'style-loader', - // }, { - // loader: 'css-loader', - // }, { - // loader: 'postcss-loader', - // options: { - // plugins: function () { - // return [ - // require('precss'), - // require('autoprefixer') - // ]; - // } - // } - // }, { - // loader: 'sass-loader' // compiles SASS to CSS - // }] - }, - { - test: /\.m?js$/, - exclude: /(node_modules|bower_components)/, - use: { - loader: 'babel-loader' - } - } - ], + test: /\.(scss|less)$/, + use: ExtractTextPlugin.extract({ + fallback: 'style-loader', + use: ['css-loader', 'sass-loader', 'less-loader'] + }) + }], }, plugins: [ new HtmlWebpackPlugin({ filename: 'index.html', // 配置输出文件名和路径 template: './src/login.html', // 配置要被编译的html文件 hash: true, - // 压缩 => production 模式使用 minify: { removeAttributeQuotes: true, //删除双引号 - // collapseWhitespace: true //折叠 html 为一行 + collapseWhitespace: true //折叠 html 为一行 } }), new CleanWebpackPlugin(['dist']), diff --git a/yarn.lock b/yarn.lock index f857fff..e98613f 100644 --- a/yarn.lock +++ b/yarn.lock @@ -903,6 +903,11 @@ array-unique@^0.3.2: resolved "https://registry.yarnpkg.com/array-unique/-/array-unique-0.3.2.tgz#a894b75d4bc4f6cd679ef3244a9fd8f46ae2d428" integrity sha1-qJS3XUvE9s1nnvMkSp/Y9Gri1Cg= +asap@~2.0.3: + version "2.0.6" + resolved "https://registry.yarnpkg.com/asap/-/asap-2.0.6.tgz#e50347611d7e690943208bbdafebcbc2fb866d46" + integrity sha1-5QNHYR1+aQlDIIu9r+vLwvuGbUY= + asn1.js@^4.0.0: version "4.10.1" resolved "https://registry.yarnpkg.com/asn1.js/-/asn1.js-4.10.1.tgz#b9c2bf5805f1e64aadeed6df3a2bfafb5a73f5a0" @@ -1438,6 +1443,11 @@ clone-deep@^2.0.1: kind-of "^6.0.0" shallow-clone "^1.0.0" +clone@^2.1.1, clone@^2.1.2: + version "2.1.2" + resolved "https://registry.yarnpkg.com/clone/-/clone-2.1.2.tgz#1b7f4b9f591f1e8f83670401600345a02887435f" + integrity sha1-G39Ln1kfHo+DZwQBYANFoCiHQ18= + code-point-at@^1.0.0: version "1.1.0" resolved "https://registry.yarnpkg.com/code-point-at/-/code-point-at-1.1.0.tgz#0d070b4d043a5bea33a2f1a40e2edb3d9a4ccf77" @@ -2058,7 +2068,7 @@ entities@~1.1.1: resolved "https://registry.yarnpkg.com/entities/-/entities-1.1.2.tgz#bdfa735299664dfafd34529ed4f8522a275fea56" integrity sha512-f2LZMYl1Fzu7YSBKg+RoROelpOaNrcGmE9AZubeDfrCEia483oW4MI4VyFd5VNHIgQ/7qm1I0wUHK1eJnn2y2w== -errno@^0.1.3, errno@~0.1.7: +errno@^0.1.1, errno@^0.1.3, errno@~0.1.7: version "0.1.7" resolved "https://registry.yarnpkg.com/errno/-/errno-0.1.7.tgz#4684d71779ad39af177e3f007996f7c67c852618" integrity sha512-MfrRBDWzIWifgq6tJj60gkAwtLNb6sQPlcFrSOflcP1aFmmruKQ2wRnze/8V6kgyz7H3FF8Npzv78mZ7XLLflg== @@ -2312,6 +2322,14 @@ figgy-pudding@^3.1.0, figgy-pudding@^3.5.1: resolved "https://registry.yarnpkg.com/figgy-pudding/-/figgy-pudding-3.5.1.tgz#862470112901c727a0e495a80744bd5baa1d6790" integrity sha512-vNKxJHTEKNThjfrdJwHc7brvM6eVevuO5nTj6ez8ZQ1qbXTvGthucRF7S4vf2cr71QVnT70V34v0S1DyQsti0w== +file-loader@^2.0.0: + version "2.0.0" + resolved "https://registry.yarnpkg.com/file-loader/-/file-loader-2.0.0.tgz#39749c82f020b9e85901dcff98e8004e6401cfde" + integrity sha512-YCsBfd1ZGCyonOKLxPiKPdu+8ld9HAaMEvJewzz+b2eTF7uL5Zm/HdBF6FjCrpCMRq25Mi0U1gl4pwn2TlH7hQ== + dependencies: + loader-utils "^1.0.2" + schema-utils "^1.0.0" + fill-range@^4.0.0: version "4.0.0" resolved "https://registry.yarnpkg.com/fill-range/-/fill-range-4.0.0.tgz#d544811d428f98eb06a63dc402d2403c328c38f7" @@ -2864,6 +2882,11 @@ ignore-walk@^3.0.1: dependencies: minimatch "^3.0.4" +image-size@~0.5.0: + version "0.5.5" + resolved "https://registry.yarnpkg.com/image-size/-/image-size-0.5.5.tgz#09dfd4ab9d20e29eb1c3e80b8990378df9e3cb9c" + integrity sha1-Cd/Uq50g4p6xw+gLiZA3jfnjy5w= + import-cwd@^2.0.0: version "2.1.0" resolved "https://registry.yarnpkg.com/import-cwd/-/import-cwd-2.1.0.tgz#aa6cf36e722761285cb371ec6519f53e2435b0a9" @@ -3368,6 +3391,31 @@ lcid@^2.0.0: dependencies: invert-kv "^2.0.0" +less-loader@^4.1.0: + version "4.1.0" + resolved "https://registry.yarnpkg.com/less-loader/-/less-loader-4.1.0.tgz#2c1352c5b09a4f84101490274fd51674de41363e" + integrity sha512-KNTsgCE9tMOM70+ddxp9yyt9iHqgmSs0yTZc5XH5Wo+g80RWRIYNqE58QJKm/yMud5wZEvz50ugRDuzVIkyahg== + dependencies: + clone "^2.1.1" + loader-utils "^1.1.0" + pify "^3.0.0" + +less@^3.9.0: + version "3.9.0" + resolved "https://registry.yarnpkg.com/less/-/less-3.9.0.tgz#b7511c43f37cf57dc87dffd9883ec121289b1474" + integrity sha512-31CmtPEZraNUtuUREYjSqRkeETFdyEHSEPAGq4erDlUXtda7pzNmctdljdIagSb589d/qXGWiiP31R5JVf+v0w== + dependencies: + clone "^2.1.2" + optionalDependencies: + errno "^0.1.1" + graceful-fs "^4.1.2" + image-size "~0.5.0" + mime "^1.4.1" + mkdirp "^0.5.0" + promise "^7.1.1" + request "^2.83.0" + source-map "~0.6.0" + load-json-file@^1.0.0: version "1.1.0" resolved "https://registry.yarnpkg.com/load-json-file/-/load-json-file-1.1.0.tgz#956905708d58b4bab4c2261b04f59f31c99374c0" @@ -3634,7 +3682,12 @@ mime@1.4.1: resolved "https://registry.yarnpkg.com/mime/-/mime-1.4.1.tgz#121f9ebc49e3766f311a76e1fa1c8003c4b03aa6" integrity sha512-KI1+qOZu5DcW6wayYHSzR/tXKCDC5Om4s1z2QJjDULzLcmf3DvzS7oluY4HCTrc+9FiKmWUgeNLg7W3uIQvxtQ== -mime@^2.3.1: +mime@^1.4.1: + version "1.6.0" + resolved "https://registry.yarnpkg.com/mime/-/mime-1.6.0.tgz#32cd9e5c64553bd58d19a568af452acff04981b1" + integrity sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg== + +mime@^2.0.3, mime@^2.3.1: version "2.4.0" resolved "https://registry.yarnpkg.com/mime/-/mime-2.4.0.tgz#e051fd881358585f3279df333fe694da0bcffdd6" integrity sha512-ikBcWwyqXQSHKtciCcctu9YfPbFYZ4+gbHEmE0Q8jzcTYQg5dHCr3g2wwAZjPoJfQVXZq6KXAjpXOTf5/cjT7w== @@ -4824,6 +4877,13 @@ promise-inflight@^1.0.1: resolved "https://registry.yarnpkg.com/promise-inflight/-/promise-inflight-1.0.1.tgz#98472870bf228132fcbdd868129bad12c3c029e3" integrity sha1-mEcocL8igTL8vdhoEputEsPAKeM= +promise@^7.1.1: + version "7.3.1" + resolved "https://registry.yarnpkg.com/promise/-/promise-7.3.1.tgz#064b72602b18f90f29192b8b1bc418ffd1ebd3bf" + integrity sha512-nolQXZ/4L+bP/UGlkfaIujX9BKxGwmQ9OT4mOt5yvy8iK1h3wqTEJCijzGANTCCl9nWjY41juyAn2K3Q1hLLTg== + dependencies: + asap "~2.0.3" + proxy-addr@~2.0.4: version "2.0.4" resolved "https://registry.yarnpkg.com/proxy-addr/-/proxy-addr-2.0.4.tgz#ecfc733bf22ff8c6f407fa275327b9ab67e48b93" @@ -5126,7 +5186,7 @@ repeating@^2.0.0: dependencies: is-finite "^1.0.0" -request@^2.87.0, request@^2.88.0: +request@^2.83.0, request@^2.87.0, request@^2.88.0: version "2.88.0" resolved "https://registry.yarnpkg.com/request/-/request-2.88.0.tgz#9c2fca4f7d35b592efe57c7f0a55e81052124fef" integrity sha512-NAqBSrijGLZdM0WZNsInLJpkJokL72XYjUpnB0iwsRgxh7dB6COrHnTBNwN0E+lHDAJzu7kLAkDeY08z2/A0hg== @@ -6039,6 +6099,15 @@ urix@^0.1.0: resolved "https://registry.yarnpkg.com/urix/-/urix-0.1.0.tgz#da937f7a62e21fec1fd18d49b35c2935067a6c72" integrity sha1-2pN/emLiH+wf0Y1Js1wpNQZ6bHI= +url-loader@^1.1.2: + version "1.1.2" + resolved "https://registry.yarnpkg.com/url-loader/-/url-loader-1.1.2.tgz#b971d191b83af693c5e3fea4064be9e1f2d7f8d8" + integrity sha512-dXHkKmw8FhPqu8asTc1puBfe3TehOCo2+RmOOev5suNCIYBcT626kxiWg1NBVkwc4rO8BGa7gP70W7VXuqHrjg== + dependencies: + loader-utils "^1.1.0" + mime "^2.0.3" + schema-utils "^1.0.0" + url-parse@^1.4.3: version "1.4.4" resolved "https://registry.yarnpkg.com/url-parse/-/url-parse-1.4.4.tgz#cac1556e95faa0303691fec5cf9d5a1bc34648f8" @@ -6152,11 +6221,6 @@ wbuf@^1.1.0, wbuf@^1.7.2: dependencies: minimalistic-assert "^1.0.0" -we-validator@^1.3.9: - version "1.3.9" - resolved "https://registry.yarnpkg.com/we-validator/-/we-validator-1.3.9.tgz#d52d50e9d512b23539d804761024fec9de258a14" - integrity sha512-3mrP/53XjkimGbbM3xcw4UDdDjqT2ZsOwDdCsas+exyiA8rFIv75SqwX0KHx0LnQpnKdrQocWTZQlckVcLfNLQ== - webpack-cli@^3.1.2: version "3.1.2" resolved "https://registry.yarnpkg.com/webpack-cli/-/webpack-cli-3.1.2.tgz#17d7e01b77f89f884a2bbf9db545f0f6a648e746" From 5acddd447641a71c59c2db88830a5e0539c115bf Mon Sep 17 00:00:00 2001 From: mr_zhaojie Date: Thu, 13 Dec 2018 14:30:44 +0800 Subject: [PATCH 2/4] =?UTF-8?q?webpack=E9=85=8D=E7=BD=AEbootstrap4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/index.scss | 4 ++-- webpack.config.js | 12 ++++++++---- 2 files changed, 10 insertions(+), 6 deletions(-) diff --git a/src/index.scss b/src/index.scss index 8d6a5bf..c4467cd 100644 --- a/src/index.scss +++ b/src/index.scss @@ -1,2 +1,2 @@ -@import "main"; -@import "../node_modules/bootstrap/scss/bootstrap.scss"; \ No newline at end of file +@import "./css/main"; +@import "~bootstrap/scss/bootstrap"; \ No newline at end of file diff --git a/webpack.config.js b/webpack.config.js index 8df523f..1ab688c 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -5,10 +5,14 @@ const path = require('path'); const webpack = require('webpack'); module.exports = { - entry: './src/index.js', + + mode: 'development', //可以更改模式 production | development + entry: { + app:'./src/index.js' + }, output: { path: path.resolve(__dirname, 'dist'), - filename: 'bundle.js' + filename: '[name].bundle.js' }, resolve: {}, devServer: { @@ -18,10 +22,10 @@ module.exports = { }, module: { rules: [{ - test: /\.(scss|less)$/, + test: /\.(scss)$/, use: ExtractTextPlugin.extract({ fallback: 'style-loader', - use: ['css-loader', 'sass-loader', 'less-loader'] + use: ['css-loader', 'sass-loader'] }) }], }, From 20f0187a2ea3593a0a7bf893ed50f22467bca088 Mon Sep 17 00:00:00 2001 From: Heartbeats Date: Thu, 13 Dec 2018 14:51:13 +0800 Subject: [PATCH 3/4] Update README.md --- README.md | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) diff --git a/README.md b/README.md index 357c543..7b2c4ab 100644 --- a/README.md +++ b/README.md @@ -1,7 +1,6 @@ # webpack-practice -webpack系列 -* git clone -* yarn install -* npm run start -* npm run build +## bootstrap4分支 + +> webpack4整合bootstrap4，样式使用bootstrap sass文件 + From c318a8cab623973eff4d5db1f4d5c92bb9fb8986 Mon Sep 17 00:00:00 2001 From: Heartbeats Date: Thu, 13 Dec 2018 14:51:56 +0800 Subject: [PATCH 4/4] Update README.md --- README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/README.md b/README.md index 7b2c4ab..1edf620 100644 --- a/README.md +++ b/README.md @@ -2,5 +2,6 @@ ## bootstrap4分支 > webpack4整合bootstrap4，样式使用bootstrap sass文件 +> 参考地址: (http://code.z01.com/v4/docs/webpack.html)