webpack入门

最新推荐文章于 2024-10-14 08:34:05 发布

zhouyl02

最新推荐文章于 2024-10-14 08:34:05 发布

阅读量225

点赞数 1

分类专栏：前端相关

本文链接：https://blog.csdn.net/zhouyl02/article/details/82937427

版权

前端相关专栏收录该内容

19 篇文章 0 订阅

订阅专栏

1. 创建环境

此文的webpack-demo目录里的文件传送门
创建一个webpack-demo的目录，该目录下有五个文件：
index.html
app.js
module-1.js
module-2.js
index.scss

cd ~/Desktop
mkdir webpack-demo
cd webpack-demo
touch index.html app.js module-1.js index.scss

npm init
// 一直回车就可以了
npm install --save-dev webpack
touch webpack.config.js

从webpack官网拷贝webpack.config.js的配置，将其修改为自己的路径：

const path = require('path');

module.exports = {
  entry: './src/index.js',     // 我的demo就是修改这行为 entry: './app.js',
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'dist')
  }
};

接下来

npx webpack
// 会让你安装webpack-cli'，回答yes就可以了

之后会出现警告：
WARNING in configuration
The ‘mode’ option has not been set, webpack will fallback to ‘production’ for this value. Set ‘mode’ option to ‘development’ or ‘production’ to enable defaults for each environment.
将警告Google（百度）得到解决方案：
在这里插入图片描述

， // 注意这个逗号
"dev": "webpack --mode development",  // 开发环境
"build": "webpack --mode production"  // 生产环境

然后：
在这里插入图片描述

 mode: 'development', // 选择开发环境

之后就能运行成功了：

npx webpack

2. 将ES6及以上语法转化为ES5语法

babel-loader文档
按照文档操作：

npm install -D babel-loader @babel/core @babel/preset-env webpack

添加下面的代码：
在这里插入图片描述

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

于是babel就配置成功了

 cp index.html dist/index.html

下面对文件dist/index.html，app.js，module-1.js，module-2.js添加内容：

// dist/index.html
<!DOCTYPE html>
<html lang="zh-Hans">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>webpack入门</title>
</head>
<body>
    <h1>Hello, webpack!</h1>
    <script src="./main.js"></script>
</body>
</html>
// module-1.js 模块1
let fn = ()=>{
    let a = 1
    console.log(1)
}
export default fn
// module-2.js 模块2
function fn(){
    let b = 2
    alert(b)
}
export default fn
// app.js   主要是为了使用模块化的语法
import x from './module-1'
import y from './module-2'
import './style.scss'  // 对webpack来说，所有东西都是模块，即使你是scss
x()
y()

npx webpack
// 可以看到webpack将app.js，module-1.js，module-2.js三个文件合并成一个文件main.js输出
// 在dist目录下打开main.js，可以看到webpack确实将ES6的语法转变成ES5了

3. 将SCSS文件转化为CSS文件

对文件 style.scss 添加内容：

body{
    background: rgb(224, 236, 46);
    h1{
        color: red;        
    }
}

sass-loader文档
按文档操作：

npm install sass-loader node-sass webpack --save-dev

在这里插入图片描述

,
{
  test: /\.scss$/,
  use: [
      "style-loader", // creates style nodes from JS strings
      "css-loader", // translates CSS into CommonJS
      "sass-loader" // compiles Sass to CSS, using Node Sass by default
  ]
}

然后运行

npx webpack
// 报错，找不到 css-loader，对于这种的处理办法是：找不到什么就安装什么
npm install css-loader
npx webpack
// 报错，找不到 style-loader
npm install style-loader
npx webpack
// 运行成功，会发现scss被加载到了main.js中
// 打开 dist/index.html，页面有样式

在这里插入图片描述
我们可以发现scss文件被转成style标签了，但是这样出现一个问题，也就是说js不加载完成的话，页面就什么样式也没有了
一个折中办法是，在html中link默认css样式文件，然后在用js加载炫酷的css效果