webpack基础设置

1、新建项目

2、在项目中创建两个文件夹 src 和 dist,其中src文件夹用于存放开发时写的js、css等文件,dist文件夹中存放打包后生成的bundle.js文件。

3、确保项目本身安装了node

        通过在terminal中输入node -v,查看是否有node的版本号

webpack创建项目并打包的详细流程记录

 4、确保项目安装了webpack

        通过在terminal中输入webpack -v,查看是否有webpack的版本号

webpack创建项目并打包的详细流程记录

5、可以在terminal中输入:

webpack ./src/main.js ./dist/bundle.js

 来将src文件夹下的以main.js作为入口文件的全部文件打包到dist文件夹中的bundle.js中

由于每次都这么写太麻烦,可以配置简单命令来实现。

6、创建webpack.config.js文件

        并在文件中写入如下代码:

//去node中找一个叫'path'的包
const path = require('path')
 
//动态获取绝对路径需要用到node语法
module.exports = {
    entry: './src/main.js',//这是入口路径
    output: { //output出口需要写成一个类的形式
        path: path.resolve(__dirname, 'dist'),//这是动态的获取的绝对路径
        filename: 'bundle.js'
    },
}

用到node就需要npm,在terminal中输入 npm init , 会自动生成package.json,在package.json中添加

webpack创建项目并打包的详细流程记录

 即可在terminal中通过输入 npm run build 对代码进行打包。

关于loader

webpack会自动处理js之间相关的依赖,但是在开发中不仅仅有基本的js代码处理,也需要加载css、图片,将ES6转成ES5代码,将TypeScript转换成ES5代码,将scss、less转成css,将.jsx、.vue文件转成js文件等。webpack本身不支持上述操作。需要加载loader。

loaders | webpack 中文网 (webpackjs.com)

可以查看webpack的所有loader。

添加对loader的依赖一般都是在terminal中npm install,然后在webpack.config.js文件中添加对其的配置。

关于npm install 包的普遍报错的解决方法:

webpack创建项目并打包的详细流程记录

在包后面加上  --legacy-peer-deps 

 例如:

webpack创建项目并打包的详细流程记录

与压缩文件相关的学习

UglifyjsWebpackPlugin插件

使用:

terminal中输入:

npm install --save-dev uglifyjs-webpack-plugin@1.1.1 --legacy-peer-deps

 webpack.config.js文件中:

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

 以及在plugins中:

new UglifyjsWebpackPlugin()

这样可以将bundle.js压缩为一行代码。

总结

原文地址:https://blog.csdn.net/weixin_43867892/article/details/127458739

相关文章: