欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

NPM 和webpack 的基础使用

程序员文章站 2022-03-03 23:24:55
...

NPM 的基本使用

npm i (安装)

npm i -g (全局安装)

npm i -g jquery -S 生产环境

npm i jquery -D 开发模式

WebPack 的使用

初始化项目 进入项目文件中

npm init -y 初始化一个项目文件夹

安装webpack到开发环境 三个内容

npm i -g webpack webpack-cli webpack-dev-server -D

  • 在项目文件中创建 src 目录 src > index.js 创建入口文件
  • 打包没有配置配置文件的情况下 打完包会在项目下生成dist文件夹 下面会有 main.js 入口文件
    • node dist/main 可以运行项目 也可以在html中用<script src="dist/main.js"></script>引入使用

webpack —mode development //开发环境

webpack —mode production //生产环境

  • 安装使用html 插件

npm i html-webpack-plugin -D

  • 安装 css 插件

npm i css-loader style-loader -D

  • 安装打包css到独立文件的插件

npm i -D mini-css-extract-plugin

  • css兼容处理

    • 安装资源 npm i postcss-loader postcss-preset-env -D

    • 项目文件夹下创建 postcss.config.js

      1. module.exports = {
      2. plugins: [
      3. require('postcss-preset-env')()
      4. ]
      5. }
    • 项目文件夹下的 package.json中添加

      1. ```javascript

      “browserslist”: [

      1. "> 0.2%",
      2. "last 2 versions",
      3. "not dead"

      ]

      1. ```
  • 处理图片 npm i url-loader file-loader html-withimg-loader -D

    • 处理css中的图片 直接用url()方法

      1. #div{
      2. background-image:url("../image/1.png")
      3. }
    • html中使用图片 需要安装 html-withimg-loader

  • 压缩CSS npm install css-minimizer-webpack-plugin -D

  • Less需要使用npm下载less包和less-loader

  • Sass需要使用npm下载node-sass包和sass-loader

    npm i node-sass sass-loader -D

    注意 创建sass文件时 是创建 index.scss

  1. //在需要打包的 js 中引入样式 此处为cart.js
  2. require('./base.css'); // 引入css样式
  3. require('./eduwork.css'); // 引入css样式
  4. require('./index.css'); // 引入css样式
  5. require('./list.css'); // 引入css样式
  6. require('./info.css'); // 引入css样式
  7. require('./cart.css'); // 引入css样式
  8. require("./index.scss"); //引入sass
  • 配置文件

在项目目录下 手动创建 webpack.config.js 为webpack的配置文件

  1. var {resolve} =require('path');
  2. //引用html 插件
  3. var htmlWebpackPlugin = require("html-webpack-plugin");
  4. //引入打包css到独立文件的插件
  5. var miniCssExtractPlugin=require('mini-css-extract-plugin');
  6. //引入压缩css插件
  7. var cssMinimizerWebpackPlugin = require('css-minimizer-webpack-plugin');
  8. module.exports = {
  9. //打包开始的入口文件
  10. //可以是单个
  11. //entry:"./src/index.js",
  12. //也可以是多个(数组) 会打包在一个入口文件中
  13. //entry:["./src/index.js","./src/index2.js"]
  14. //还可以是对象模式 这时会生成多个入口文件main.js和index.js
  15. entry: {
  16. index: "./src/index.js"
  17. },
  18. //打包后路径
  19. output: {
  20. //输出的入口文件名 单个入口
  21. //"filename":"main.js",
  22. //输出的入口文件名 多个入口
  23. "filename": "[name].js",
  24. //打包后的文件夹名
  25. "path": resolve(__dirname, 'dist')
  26. },
  27. plugins: [
  28. //使用html插件
  29. new htmlWebpackPlugin({
  30. //使用的html文件
  31. template: "./src/index.html",
  32. //输出的html文件名
  33. filename: "index.html",
  34. //可以 在输出的index.html 中引用指定js 对应entry 中的key
  35. chunks: ['index'],
  36. minify: {
  37. //移除空格
  38. collapseWhitespace: true,
  39. //移除注释
  40. removeComment: true
  41. },
  42. }),
  43. //创建 打包css到独立文件夹下的插件 对象
  44. new miniCssExtractPlugin({
  45. filename:'css/[name].css' //输出的css文件名,放置在dist/css目录下
  46. }),
  47. //创建 压缩css 对象
  48. new cssMinimizerWebpackPlugin()
  49. ],
  50. module: {
  51. rules: [
  52. //处理css
  53. {
  54. // 正则表达式,表示.css后缀的文件
  55. test: /\.css$/,
  56. // 针对css文件使用的loader,注意有先后顺序,数组项越靠后越先执行
  57. use: [
  58. //css打包成独立文件
  59. {
  60. loader: miniCssExtractPlugin.loader
  61. } ,
  62. //css处理插件
  63. 'css-loader',
  64. //css兼容性处理
  65. 'postcss-loader'
  66. ]
  67. // use: ['style-loader','css-loader'] //style-loader类似打包到html中
  68. },
  69. //处理图片
  70. {
  71. test: /\.(png|jpg|jpeg|gif)$/,
  72. use: [
  73. {
  74. loader: 'url-loader',
  75. options: {
  76. // publicPath: './img/', //会在html的地址前加上这个
  77. outputPath: 'img/',
  78. limit: 1024 * 8,
  79. name:'[name][hash:8].[ext]',
  80. esModule: false
  81. }
  82. }
  83. ],
  84. },
  85. // html加载图片
  86. {
  87. test:/\.(html)$/i,
  88. use:'html-withimg-loader', // 解析 html中的图片资源
  89. },
  90. //处理其他非js|json|html|css|less|scss|png|gif|jpg|jpeg文件
  91. {
  92. exclude: /\.(js|json|html|css|less|scss|png|gif|jpg|jpeg)$/,
  93. loader: 'file-loader',
  94. options: {
  95. outputPath: 'font/',
  96. publicPath: './font',
  97. name:'[name][hash:8].[ext]'
  98. }
  99. },
  100. //处理sass
  101. {
  102. // 正则表达式,表示.css后缀的文件
  103. test: /\.scss$/,
  104. // 针对css文件使用的loader,注意有先后顺序,数组项越靠后越先执行
  105. use: [
  106. //css打包成独立文件
  107. {
  108. loader: miniCssExtractPlugin.loader
  109. } ,
  110. //css处理插件
  111. 'css-loader',
  112. //css兼容性处理
  113. 'postcss-loader',
  114. 'sass-loader'
  115. ]
  116. // use: ['style-loader','css-loader'] //style-loader类似打包到html中
  117. },
  118. ]
  119. },
  120. //默认打包方式 开发模式 | production 生产模式
  121. mode:'development',
  122. //服务器启动 npx webpack serve
  123. devServer: {
  124. port:8080,
  125. compress:true,
  126. open:true,
  127. hot:true
  128. },
  129. //生产模式打包时文件过大导致报错
  130. performance: {
  131. hints:'warning',
  132. //入口起点的最大体积
  133. maxEntrypointSize: 50000000,
  134. //生成文件的最大体积
  135. maxAssetSize: 30000000
  136. },
  137. //服务器启动后自动刷新
  138. target: "web",
  139. };

启动 webServe

npx webpack serve