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

webpack基础设置

1、新建项目

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

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

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

 4、确保项目安装了webpack

        通过在terminal中输入webpack -v，查看是否有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中添加

 即可在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 包的普遍报错的解决方法：

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

 例如：

与压缩文件相关的学习

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压缩为一行代码。

总结

到此这篇关于webpack创建项目并打包的文章就介绍到这了,更多相关webpack创建项目并打包内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！