webpack-自己

I_am_so_cute

已于 2022-07-19 22:59:45 修改

阅读量76

点赞数

分类专栏：前端文章标签： webpack 前端 javascript

于 2021-03-31 11:41:29 首次发布

本文链接：https://blog.csdn.net/weixin_44434643/article/details/115346812

版权

前端专栏收录该内容

9 篇文章 0 订阅

订阅专栏

一、Webpack项目建立：

1.创建如下项目结构：
在这里插入图片描述
补充：不用自己创建的：

node_modules文件夹：在安装需要的插件后，会自动生成
package.json文件：在初始化项目后，会自动生成，可添加自定义指令，方便使用
package-lock.json文件：在完成webpack打包后自动生成

二、安装webpack步骤【在项目目录下打开cmd，输入以下命令]

npm init -y

npm install --save-dev webpack

npm install --save-dev webpack-cli

npm install --save-dev style-loader css-loader

npm install --save-dev file-loader

npm install --save-dev mini-css-extract-plugin

npm install --save-dev webpack-dev-server

cnpm i html-webpack-plugin -D

cnpm i clean-webpack-plugin -D

cnpm i optimize-css-assets-webpack-plugin -D

三、代码编写

9.进入代码编写过程

index.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>
	</title>
	<link rel="stylesheet" href="../dist/main.css">
</head>
<body>

</body>
<script src="../dist/main.js"></script>
</html>

index.js

import '../css/index.css'
 
console.log('我显示了')

index.css

html,body {
	background: url('../img/1.jpg');
}

webpack.config.js

const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const htmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/js/index.js', //配置输入文件
  output: {
    filename: 'main.js', //配置输出文件名
    path: path.resolve(__dirname, 'dist'), //输出文件路径
    publicPath: 'dist/' // 用来指定静态资源发布地，不然后面图片会找不到的
  },
  module: {//用来配置非JS文件对应的loader【加载器
    mode : 'development',
    rules: [ //非JS文件和loader加载器的匹配规则
      {
        test: /\.css$/,   //正则表达式，.表示一个或多个字符，而此处只需要匹配.css，所以用反斜杠\.表示只匹配点.，$表示以.css结尾
        use: [{ //use表示使用谁来处理，可以放入多个插件，插件的调用顺序是从后往前
            loader: MiniCssExtractPlugin.loader,//拆分css文件
            options: {
              publicPath: ''
            }
          },
          'css-loader' //解析css的插件
        ]
      },
      {
        test: /\.(png|svg|jpg|gif)$/, 
        use: [
          'file-loader?name=[hash:8]-[name].[ext]'//解析图片的插件，因为会把所有图片都重新编码为base64放到根目录，所以会重命名，防止有图片名称相同。
          //自定义命名规则为，[hash:8]为：生成哈希值，取前8位；[name]为原本图片名；[ext]为原本图片后缀
        ]
      }
    ]
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: "[name].css",
      chunkFilename: "[id].css"
    }),
    new htmlWebpackPlugin({
      template: './src/index.html', //指定要把哪个页面作为模板生成到内存中
      filename: path.resolve(__dirname, 'index.html')  //开发阶段，在根目录生成首页
    })
  ]
}

webpack.publish.config.js

const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const htmlWebpackPlugin = require('html-webpack-plugin');
const {CleanWebpackPlugin} = require('clean-webpack-plugin');  //注意写法不同，并且首字母C必须大写
const optimizeCssAssetsWebpackPlugin=require('optimize-css-assets-webpack-plugin');//压缩css

module.exports = {
  mode : 'production',//生产环境下会自动压缩js代码
  entry: './src/js/index.js', //配置输入文件
  output: {
    filename: 'js/main.js', //配置输出文件名
    path: path.resolve(__dirname, 'dist'), //输出文件路径
    publicPath: './' // 用来指定静态资源发布地，以index_publish为基准
  },
  module: {//用来配置非JS文件对应的loader【加载器
    rules: [ //非JS文件和loader加载器的匹配规则
      {
        test: /\.css$/,   //正则表达式，.表示一个或多个字符，而此处只需要匹配.css，所以用反斜杠\.表示只匹配点.，$表示以.css结尾
        use: [{ //use表示使用谁来处理，可以放入多个插件，插件的调用顺序是从后往前
            loader: MiniCssExtractPlugin.loader,//拆分css文件
            options: {
              publicPath: '../'   //设置Css文件中的公共路径，防止把css文件放入css文件夹以后找不到图片。以main.css为基准
            }
          },
          'css-loader' //解析css的插件
        ],
      },
      {
        test: /\.(png|svg|jpg|gif)$/, 
        use: [
          'file-loader?name=images/[hash:8]-[name].[ext]'//解析图片的插件，因为会把所有图片都重新编码为base64放到根目录，所以会重命名，防止有图片名称相同。
          //自定义命名规则为，[hash:8]为：生成哈希值，取前8位；[name]为原本图片名；[ext]为原本图片后缀
          //通过images/把图片都放到一个单独的文件夹中
        ]
      }
    ]
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: "css/[name].css",
      chunkFilename: "[id].css"
    }),
    new htmlWebpackPlugin({
      template: './src/index.html', //指定要把哪个页面作为模板生成到内存中
      filename: path.resolve(__dirname, 'dist/index_publish.html'),      //发布阶段，在dist文件夹生成首页
      minify:{//压缩html
        removeComments:true,   //移除注释
        collapseWhitespace:true,//合并空白字符
        removeAttributeQuotes:true//移除属性上的引号
      }
    }),
    new optimizeCssAssetsWebpackPlugin(),//压缩css
    new CleanWebpackPlugin()
  ]
}

package.json

{
  "name": "webpack-demo",
  "version": "1.0.0",
  "description": "",
  "main": "webpack.config.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev-packet": "webpack --mode development",
    "dev": "webpack-dev-server --open chrome --hot --port 3000 --host 127.0.0.1",
    "pub":"webpack --config webpack.publish.config.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "css-loader": "^5.2.0",
    "file-loader": "^6.2.0",
    "html-webpack-plugin": "^5.3.1",
    "mini-css-extract-plugin": "^1.4.0",
    "style-loader": "^2.0.0",
    "webpack": "^5.28.0",
    "webpack-cli": "^3.3.12",
    "webpack-dev-server": "^3.11.2"
  }
}

在项目根目录下打开cmd，输入

npm install
npm run dev-packet
npm run dev

I_am_so_cute

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
webpack-自己

一、我遇到的坑1.安装完webpack，输入webpack -v报错提示还需要安装webpack-cli解决办法：在CMD中输入，不要在终端npm i webpack webpack-cli -D2.cnpm : 无法加载文件 C:\Users\AppData\Roaming\npm\cnpm.ps1，因为在此系统上禁止运行脚本。解决办法如下：1、在系统中搜索框输入 Windos PowerShell2、点击“管理员身份运行”3、关闭360、腾讯安全管家，否则不会显示步骤54、输入
复制链接

扫一扫