webapck手动配置（一）

子壹
147 阅读4分钟

前几天去面试了，但是学习还是不应该落下的，面试的过程中碰见了超级nice的云龙哥（偶像），其中聊到webpack，意识到还是很需要懂得webpack的配置信息的，于是学习一下webpack的手动配置，但是用的比较新的的node版本，不知道很多步骤是不是和webpack2.0的一致，所以肯定有很多不足 。

  • 入门级

    • 项目初始化，在你的项目目录里边初始化

      npm init

    • 新建项目结构src，里边index.js 和模块a.js

      //a.js
module.exports =()=>{
    console.log('我是a.js')
}

      //index.js
const hello = require('./a.js')
hello();

    • 新建index.html，用于引用 index.js

      <!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>这是入口文件</title>
</head>
<body>
    <script src="./src/index.js"></script>
</body>
</html>

    • 但是现在我们打开index.html 文件发现浏览器并不能console出我们想要的，因为浏览器并不能支持我们的require语法，于是我们的男猪脚终于上线了，webpack主角光环，哈哈哈当然人家很强不用光环的哈，安装我们的webpack和webpack-cli模块吧

      npm install webapck webapck-cli -D

    • 进行打包bulid ，npx就是从本地的node_modules找命令

      npx webpack

    • 多了dist 文件夹 ，里面生成了main.js文件 ,现在再引用就ok了吧 ，console也出来了 ，看来主角光环就是厉害，哈哈哈

      <!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>这是入口文件</title>
</head>
<body>
    <script src="./dist/main.js"></script>
</body>
</html>

    • 另一种 跑npx 的方式 ，在package.json 的script 中添加命令,现在直接使用 npm run bulid

      "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webapck"
  },

  • 输入输出

    • 新建webapck.config.js，webpack 默认的配置文件

      const path = require('path');

module.exports = {  
    mode:'development',  // 开发模式 不压缩代码
    entry : './src/index.js', // 入口文件
    output:{
        filename: 'pack.js',
        path: path.resolve(__dirname, './kkb') //需要使用绝对路径，需要引用path  打包文件夹是kkb ，文件名是 pack.js
    }
}

  • 配置webpack-dev-server

    • 目前我们每次更新完，需要重新跑build ，然后再打开html 比较繁琐 ，webpack 专门安装了一个套件，webpack-dev-server

    • 安装

      npm install webpack-dev-server -D

    • 配置package.json

      "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webapck",
    "dev": "webpack-dev-server"
  },

    • 配置webapck.config.js，当然0配置也是可以的

  • build完之后加hash过程

    • 在webapck.config.js 的配置中进行hash配置

      output:{
	filename: 'pack.[hash:6].js',
}

  • 自动加载html

    • 当然我们build之后出现， pack.6420d5.js文件 ，那么我们html中的引用就也需要更改了，那么我们不可能没次都手动修改吧，那好我们再来进行配置

    • 新建public文件夹，新建index.html作为我们的模板

    • 使用html-webpack-plugin，并配置webpack-config.js

      npm install html-webpack-plugin -D

      const htmlWebapckPlugin = require('html-webpack-plugin');
 plugins: [
     new htmlWebapckPlugin({
         template: './public/index.html',  //模板文件
         filename: 'index.html' // 输出文件的名字
     })
 ]

    • 再执行 npm run dev 我们修改a.js 浏览器就随之修改了。跑的还是外边的index.html

  • 打包

    • 现在npm run build 就会生成一个带hash 的js和一个index.html 并且引用了这个带hash的js文件

  • 支持css

    • webpack 中所有的东西都是模块，默认require的就是js，但是css 什么的解析成js ，那是不可执行的，那就需要loader来支持配置module，但是注意 use 的顺序是从右向左执行

    • 安装css -loader

      npm install css-loader -D

    • 配置webpack-config，和plugin 平级

      module:{
        rules: [
            //以css结尾
            {
                test: /.css$/,
                use: ['style-loader','css-loader'] // 先把css解析出来,并不能直接在js文件执行，我们需要将解析出来的放进style里边，那就需要安装style-loader
            }
        ]
    }

    • 安装style-loader

      npm install style-loader -D

    • 抽离css ，当我们要进行单独抽离一个css 文件时，显然上边的插件并不足以满足要求，那肯定有解决的方案啊，不然说它干嘛， mini-css-extract-plugin

      npm install mini-css-extract-plugin -D

    • 配置文件里配置被，盘它就完了

      const MiniCssExtractPlugin = require('mini-css-extract-plugin')
plugins: [
    new htmlWebapckPlugin({
        template: './public/index.html',  //模板文件
        filename: 'index.html' // 输出文件的名字
    }),
    new MiniCssExtractPlugin({
        filename: 'kkb.css'
    })
],
module:{
    rules: [
        //以css结尾
        {
            test: /.css$/,
            use: [MiniCssExtractPlugin.loader,'css-loader']  // 现在我们就不需要把css 塞到style里css解析完就用MiniCssExtractPlugin.loader
        }
    ]
}

    • npm run build 就能看见效果了

  • 支持css预编译stylus（less、sass类似）

    • stylus-loader stylus安装就完了

      npm install stylus-loader stylus -D

    • 一样 来配置吧

      module:{
    rules: [
        ......
        {
            test: /.styl$/,
            use: [MiniCssExtractPlugin.loader,'css-loader','stylus-loader']
        }
    ]
}

  • post-css 兼容性css

    • 安装postcss-loader 和autoprefixer

      npm install postcss-loader autoprefixer -D

    • 配置config文件

      module:{
    rules: [
        //以css结尾
        {
            test: /.css$/,
            //use: ['style-loader','css-loader']  
            use: [
                MiniCssExtractPlugin.loader,
                'css-loader',
                'postcss-loader'
            ]
        },
        {
            test: /.styl$/,
            use: [
                MiniCssExtractPlugin.loader,
                'css-loader',
                'postcss-loader',
                'stylus-loader'
            ]
        }
    ]
}

    • 还需要vue.config.js同级目录下新建一个postcss.config.js 对postcss进行配置

      module.exports = {
  plugins: [require('autoprefixer')]
}

  • ES6 :使用大名鼎鼎的babel来把ES6转换成ES5

    • 使用babel-loader和@babel/core @babel/preset-env

      npm install babel-loader @babel/core @babel/preset-env -D
// babel-loader是处理js转换的loader 
//@babel/core babel核心
//@babel/preset-env 是转换成那个级别的

    • 配置吧

      rules: [
    ......
    {
        test: /.js$/,
        use: [
            {
                loader:'babel-loader',
                options:{
                    presets:['@babel/preset-env']
                }
            }
        ]
    }
]

      class Kkb {
  constructor(){
    this.name = 'yuhior'
  }
  sayHi(){
    console.log('哈喽' + this.name)
  }
}

const kkb  = new Kkb()
kkb.sayHi()  //写的ES6

  • 图片

    • js中使用图片，显然这样直接npm run dev 肯定识别不出来啊

      import Logo from './img/logo.png'
let image =new Image()
image.src = Logo
document.body.appendChild(image)

    • 使用file-loader ，这样js、css 和background都支持图片了

      npm install file-loader -D

    • 不用说了你肯定知道了 ，配置嘛谁不会说啊哈哈

      rules: [
    ......
    {
        test: /\.(png|jpg|gif|jpeg)$/,
        use: ['file-loader']
    },
]

  • 底层：npm run build 做了什么事情

    • build 首先去找modules 的webpack模块里边有个bin 目录，下边有个webpack.js ,里边有个installedClis函数，这里回去寻找我们装了什么，如果安装了webpack-cli 就会执行webpakc-cli下面的bin目录文件，如果安装了webapck-command就会执行这个
    • webapck-cli下面有个cli.js 实际执行的是这个
avatar
文章
阅读
粉丝