webpack学习：安装、打包、学习css文件

终点290

已于 2022-10-01 23:02:25 修改

阅读量283

点赞数 1

文章标签： webpack 学习 javascript

于 2022-10-01 23:01:17 首次发布

本文链接：https://blog.csdn.net/qq_60692304/article/details/127135708

版权

学习目标：

目标：熟悉使用webpack

学习内容：

webpack基本使用流程，安装、打包、对css文件和样式的处理，安装时bug解决。

例如：

1. 安装webpack

2. 文件打包

3. 处理css文件

1.安装webpack

（1）安装node.js ，使用node-v查看是否安装node
（2）使用 npm i webpack@3.6.0 -g

2.打包

（1）使用webpack ./src/main.js ./dist/bundle.js 将src的模块化文件打包到dist
（2）将打包的bundle.js文件通过src引入到 index.html 中
（3）快捷打包，直接输入命令webpack将文件从 src 打包到 dist

    1）创建webpack.config.js文件
    2） 编辑config文件内的入口和出口
    3）通过```npm init```命令进行初始化，建立package.json文件，导入 path 。
  __dirname是node的全局方法。

const path = require('path')
module.exports = {
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  }
}

4.更改命令快捷方式，将webpack映射到scripts：

 "build": "webpack"。

使用npm run build命令时可优先使用本地打包
并通过 npm i webpack @3.6.0 --save-dev命令将webpack本地安装:

  "devDependencies": {
  "webpack": "^3.6.0"
}

config文件配置：

config配置

3. css文件配置

在这里插入图片描述 1.在main.js中用require引入css文件，产生依赖

require('./css/normal.css')

2.安装loader：进入webpack官网，loader 找到css和style的loader，
（1）使用npm install --save-dev css-loader命令安装css-loader。
（2）使用npm install --save-dev style-loader安装style-loader加载样式。

注意：此处安装loader如果报错，检查webpack版本和loader的版本。本人最初安装的webpack版本为3.6.0，安装loader报错。最后按提示：改为了5.0.0和最新的loader
在这里插入图片描述