webpack 4.x项目快速启动

一时失言乱红尘 2022-05-28 07:29 287阅读 0赞

70

本次项目基于node 8.4 环境，低版本跑不起来勿吐槽。webpack至少要是4.1.0以上版本。

win10系统运行cmd窗口，需要选择“以管理员身份运行”

20180401115744416

下面贴出所有的demo代码

package.json

  1. {
  2.   "name": "runxadmin",
  3.   "version": "1.0.0",
  4.   "description": "",
  5.   "main": "webpack.config.js",
  6.   "scripts": {
  7.     "build": "webpack --mode development",
  8.     "dev": "webpack-dev-server --mode production"
  9.   },
  10.   "author": "",
  11.   "license": "ISC",
  12.   "devDependencies": {
  13.     "clean-webpack-plugin": "^0.1.19",
  14.     "html-webpack-plugin": "^3.1.0",
  15.     "webpack-dev-server": "^3.1.1",
  16.     "autoprefixer": "^8.2.0",
  17.     "babel-core": "^6.26.0",
  18.     "babel-loader": "^7.1.4",
  19.     "babel-preset-env": "^1.6.1",
  20.     "bable-loader": "^0.0.1-security",
  21.     "copy-webpack-plugin": "^4.5.1",
  22.     "css-loader": "^0.28.11",
  23.     "extract-text-webpack-plugin": "^4.0.0-beta.0",
  24.     "file-loader": "^1.1.11",
  25.     "glob": "^7.1.2",
  26.     "less": "^3.0.1",
  27.     "less-loader": "^4.1.0",
  28.     "node-sass": "^4.8.3",
  29.     "postcss-loader": "^2.1.3",
  30.     "purify-css": "^1.2.5",
  31.     "purifycss-webpack": "^0.7.0",
  32.     "sass-loader": "^6.0.7",
  33.     "style-loader": "^0.20.3",
  34.     "uglifyjs-webpack-plugin": "^1.2.4",
  35.     "url-loader": "^1.0.1",
  36.     "webpack": "^4.1.0",
  37.     "webpack-cli": "^2.0.13"
  38.   },
  39.   "dependencies": {
  40.     "jquery": "^3.3.1"
  41.   }
  42. }

webpack.config.js

  1. const path = require('path');
  2. const HtmlWebpackPlugin = require('html-webpack-plugin');
  3. const webpack = require('webpack');
  4. //const UglifyjsWebpackPlugin = require('uglifyjs-webpack-plugin');
  5. const ExtractTextPlugin = require('extract-text-webpack-plugin');
  6. const PurifyCssWebpack = require('purifycss-webpack');
  7. const glob = require('glob');
  8. const CopyWebpackPlugin = require('copy-webpack-plugin');
  9. //const CleanWebpackPlugin = require('clean-webpack-plugin');
  11. module.exports = {
  12.     entry: { //多入口文件,支持json
  13.         entry: './src/index.js',
  14.         jquery: 'jquery'
  15.     },
  16.     output:{ //定义出口
  17.         path:path.resolve(__dirname,'dist'),
  18.         filename:'js/[name]-[hash].js'
  19.     },
  20.     module:{
  21.         rules:[
  22.             {
  23.                 test:/\.css$/,  //处理css
  24.                 use:[
  25.                     {loader:'style-loader'},
  26.                     {loader:'css-loader'},
  27.                     {loader:'postcss-loader'}
  28.                 ],
  29.                 use:ExtractTextPlugin.extract({
  30.                     fallback:'style-loader',
  31.                     use: ['css-loader','postcss-loader'],
  32.                     publicPath:'../'
  33.                 })
  34.             },
  35.             {
  36.                 test: /\.less$/, //处理less
  37.                 use:ExtractTextPlugin.extract({
  38.                     fallback:'style-loader',
  39.                     use: ['css-loader','less-loader']
  40.                 })
  41.             },
  42.             {
  43.                 test:/\.(sass|scss)$/, //处理sass
  44.                 use:['style-loader','css-loader','sass-loader']
  45.             },
  46.             {
  47.                 test:/\.(js|jsx)$/, // 处理js
  48.                 use:['babel-loader'],
  49.                 exclude:/node_modules/ //不包含的目录node_modules
  50.             },            
  51.             {
  52.                 test:/\.(png|jpg|gif)$/, // 处理图片
  53.                 use: [{
  54.                     loader:'url-loader',
  55.                     options:{
  56.                         limit:5000, //设置转base64的警戒值
  57.                         outputPath: 'images' //图片打包出去的目录
  58.                     }
  59.                 }]
  60.             }
  61.         ]
  62.     },
  63.     devServer:{
  64.         //设置服务器访问的基本目录
  65.         contentBase:path.resolve(__dirname, 'dist'), // 要求服务器访问dist目录
  66.         host:'localhost', // 设置服务器ip地址，可以是localhost
  67.         port:8090, // 设置端口号
  68.         open:true, //自动拉起浏览器
  69.         hot:true //模块热跟新
  70.     },
  71.     plugins:[
  72.         //new CleanWebpackPlugin(['dist']), //表示每次运行之前先删除dist目录
  73.         //new UglifyjsWebpackPlugin(),
  74.         new webpack.HotModuleReplacementPlugin(), //热跟新
  75.         new HtmlWebpackPlugin({
  76.             filename: 'index.html',//定义生成的页面的名称
  77.             minify:{
  78.                     collapseWhitespace:true //压缩html代码
  79.             },
  80.             title:"这里是设置HTML title",
  81.             template: './src/index.html'
  82.         }),
  83.         new ExtractTextPlugin('css/index.css'),
  84.         new PurifyCssWebpack({ // 消除冗余css代码
  85.             paths:glob.sync(path.join(__dirname,'src/*.html')) //path.join合并路径
  86.         }),
  87.         new CopyWebpackPlugin([{ // 静态文件输出 也就是复制粘贴
  88.             from:path.resolve(__dirname,'src/assets'), //将哪里的文件
  89.             to:'./pullic' // 复制到哪里
  90.         }]),
  91.         new webpack.ProvidePlugin({
  92.             $:'jquery' // 下载引入jquery
  93.         })
  94.     ],
  95.     optimization:{ // 提取js 第三方库等
  96.         splitChunks:{
  97.             cacheGroups:{
  98.                 aaa:{
  99.                     chunks:'initial', // 初始化
  100.                     name:'jquery',      // entry中js
  101.                     enforce:true      // 强制
  102.                 },
  103.                 bbb:{
  104.                     chunks:'initial',
  105.                     name:'jquery',
  106.                     enforce:true
  107.                 }
  108.             }
  109.         }
  110.     }
  111. }

postcss.config.js

  1. module.exports ={
  2.     plugins:[
  3.         require('autoprefixer')
  4.     ]
  5. };

src为开发源码目录,dist为打包生成的项目目录。

src/assest下可以放任意静态文件，可以同步复制到dist/public目录中.

src/css

a.css

  1. body{
  2.     background:url(../images/404.jpg) right top repeat-y;
  3. }
  4. #root{
  5.     color:red;
  6.     transform: rotate(45deg);
  7. }

src/images下可以放项目中的图片

src/js

a.js

  1. export const a = 12;
  2. export const b = 5;

src/less

a.less

  1. @a:red;
  3. #div1{
  4.     color: @a;
  6.     ul{
  7.         li{
  8.             list-style: none;
  9.             height:30px;
  10.             line-height: 30px;
  11.             border-bottom: 1px dashed #000;
  12.         }
  13.     }
  14. }

src/sass

a.scss

  1. $color:green;
  3. #div2{
  4.     color: $color;
  5. }

index.html

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <title><%= htmlWebpackPlugin.options.title%></title>
  7.     <meta name="viewport" content="width=device-width, initial-scale=1">
  8.     <style>
  9.     </style>
  10.     <script>
  11.     </script>
  12. </head>
  13. <body>
  14.     <div id="box"></div>
  15.     <div id="root"></div>
  16.     <div id="div1">
  17.         我是less
  18.         <ul>
  19.             <li></li>
  20.             <li></li>
  21.             <li></li>
  22.             <li></li>
  23.         </ul>
  24.     </div>
  25.     <div id="div2">
  26.         我是scss
  27.         <ul>
  28.             <li></li>
  29.             <li></li>
  30.             <li></li>
  31.             <li></li>
  32.         </ul>
  33.     </div>
  34. </body>
  35. </html>

index.js

  1. import './css/a.css';
  2. import imgSrc from './images/404.jpg';
  3. import './less/a.less';
  4. import './sass/a.scss';
  6. import {a,b} from './js/a.js';
  7. console.log(a,b);
  9. //import $ from 'jquery';
  11. $("#box").css({
  12.     width:'100px',
  13.     height:'100px',
  14.     background:'yellow'
  15. })
  17. let oImg = new Image();
  19. oImg.onload = function(){
  20.     document.body.appendChild(oImg);
  21. };
  23. oImg.src = imgSrc;

.babelrc

  1. {
  2.     "presets": [
  3.         "env"
  4.     ]
  5. }

.gitignore

  1. .DS_Store
  2. node_modules/
  3. /dist/
  4. npm-debug.log*
  5. yarn-debug.log*
  6. yarn-error.log*
  8. # Editor directories and files
  9. .idea
  10. .vscode
  11. *.suo
  12. *.ntvs*
  13. *.njsproj
  14. *.sln

readme.md

  1. 1.进入文件夹
  2.     npm install
  4.     2.构建build
  5.     npm run build
  7.     3.运行webpack-dev-server
  8.     npm run dev

如有任何问题，欢迎加我的公众号留言讨论，谢谢！

20180227124137945

发表评论

表情：
评论列表 （有 0 条评论，287人围观）

还没有评论，来说两句吧...

相关阅读

    相关 webpack4.x 第二节

    webpack4.x 打包初体验 在根目录下建一个src(源码)目录 在建一个dist(打包后)目录 在src下建一个入口文件,index.js // in

    蔚落蔚落/ 0 赞/ 305 阅读