webpack的使用

最新推荐文章于 2024-08-13 17:28:26 发布

tiansuohao2

最新推荐文章于 2024-08-13 17:28:26 发布

阅读量146

点赞数 1

文章标签： webpack webpack常用包 npm

本文链接：https://blog.csdn.net/qq_35498516/article/details/94432730

版权

Webpack

https://webpack.docschina.org/

https://webpack.docschina.org/guides/ — 指南

是一个模块打包器，将有依赖关系的资源通过 webpack 打包生成独立的静态资源

概念

entry (入口)
output (出口)
loader (主要用于打包非 js/json 资源)
插件

使用

生成 package.json
```
$ npm init -y
```

本地安装 webpack 和 webpack-cli

$ npm install webpack webpack-cli --save-dev

创建 src 目录，在 src 目录中添加 index.js 文件

console.log('index，这是首页中的 index.js 文件')

创建 dist 目录，在 dist 目录中添加 index.html 文件

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>index</title>
</head>
<body>
  这是首页内容

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

修改 package.json 的 scripts 字段，添加：

{
  ......,
  "scripts": {
    ......,
    "start": "webpack --mode=development"
  },
  ......
}

执行 start 脚本，在 dist 目录下会生成 main.js 文件
```
$ npm start
```
查看页面效果

默认情况下， webpack 的入口文件是 ./src/index.js ，出口文件为 ./dist/main.js

如果需要更灵活的配置，在项目根目录下，创建 webpack.config.js 文件：

const path = require('path')

module.exports = {
  entry: './src/home.js', // 入口
  output: { // 出口
    path: path.join(__dirname, './dist'),
    filename: 'home.js'
  }
}

多入口 webpack 配置：

const path = require('path')

module.exports = {
  entry: {
    main: './src/home.js',
    login: './src/login.js'
  },
  output: {
    path: path.join(__dirname, './dist'),
    filename: '[name].[chunkHash].js'
  }
}

使用 html-webpack-plugin 插件生成 html 文件

$ npm i html-webpack-plugin --save-dev

配置文件 webpack.config.js 中添加：

const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  entry: '...',
  output: {
    ...
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html'
    })
  ]
}

打包 css，安装 style-loader 和 css-loader：

注意！！！需要在js文件中引入css文件才能编译css

$ npm i style-loader css-loader --save-dev

配置：

//这里是js文件eg：index.js
import './style.css'
import './index.scss'


...
console.log(11)

module.exports = {
  ...,
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: [
          'style-loader',
          'css-loader'
        ],
      },
    ],
  },
}

使用 style-loader 会将打包的 css 插入到页面 <head> 头部生成 <style> 标签内容，如果希望还是生成独立的外部 css 文件，可以使用 mini-css-extract-plugin 插件。

安装 mini-css-extract-plugin 生成外部独立 css 文件：

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

配置：

const MiniCssExtractPlugin = require('mini-css-extract-plugin')

module.exports = {
  ...,
  plugins: [
    ......,
    new MiniCssExtractPlugin({
      filename: 'css/[name].[chunkHash].css'
    })
  ],
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: [
          // 'style-loader',
  				MiniCssExtractPlugin.loader,
          'css-loader'
        ],
      },
    ],
  },
}

安装 sass-loader 来编译 *.scss 的文件

$ npm i sass-loader node-sass --save-dev

配置：

module.exports = {
  ...,
  module: {
    rules: [
			...,
  		{
        test: /\.scss$/i,
        use: [
            MiniCssExtractPlugin.loader,
            "css-loader", // translates CSS into CommonJS
            "sass-loader" // compiles Sass to CSS, using Node Sass by default
        ]
      }
    ]
	}
}

安装 less-loader 来编译 *.less 的文件

$ npm i less-loader less --save-dev

配置：

module.exports = {
  ...,
  module: {
    rules: [
			...,
  		{
        test: /\.less$/i,
        use: [
            MiniCssExtractPlugin.loader,
            "css-loader", // translates CSS into CommonJS
            "less-loader" // compiles Sass to CSS, using Node Sass by default
        ]
      }
    ]
	}
}

css 前缀：postcss-loader、autoprefixer、browserslist
图像处理：file-loader、url-loader
拷贝文件：copy-webpack-plugin

babel 转换，安装 babel-loader：

$ npm i babel-loader @babel/core @babel/preset-env --save-dev

配置：

{
  test: /\.js$/,
    exclude: /(node_modules|bower_components)/,
      use: {
        loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
      }
}

webserver 服务器：webpack-dev-server

安装：

$ npm i webpack-dev-server --save-dev

配置 package.json：

{
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --mode=production --config=webpack.dev.config.js",
    "dev": "webpack-dev-server --mode=development --config=webpack.dev.config.js",
    "start": "npm run dev"
  }
}

tiansuohao2

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
webpack的使用

Webpackhttps://webpack.docschina.org/https://webpack.docschina.org/guides/ — 指南是一个模块打包器，将有依赖关系的资源通过 webpack 打包生成独立的静态资源概念entry (入口)output (出口)loader (主要用于打包非 js/json 资源)插件使用生成 package....
复制链接

扫一扫