PHP8.1.21版本已发布
vue8.1.21版本已发布
jquery8.1.21版本已发布

博客列表 > NPM 和webpack 的基础使用

NPM 和webpack 的基础使用

中天行者
中天行者 原创
2021年12月03日 22:47:01 1021浏览

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

声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议