webpack基本操作

Posted 2021-02-09 一目沉浮

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了webpack基本操作相关的知识，希望对你有一定的参考价值。

第一步：创建项目文件夹

mkdir webpack-vue

第二步：使用vscode打开文件夹，经行npm初始化

npm   init    -y

第三步：下载项目需要资源包

 生产环境   vue

　　npm install --save vue

　　开发环境　　webpack

　　1. 他是基于nodeJs，所以要确保安装了nodeJs --save-dev工具类型加dev

　　2. npm install --save-dev webpack 或者 npm install --save-dev [email protected]<version> （提供核心功能）

　　3. npm install --save-dev webpack-cli(提供命令命令行)或者npm install --save-dev webpack-command

　　注意4.x以上的webpak才需要安装webpack-cli

第四步：在项目文件夹（webpack-vue）里面创建一个src文件夹，用来存放源文件（source）

//在src文件里面创建一个入口js--->index.js
var a=0;
alert(a);

第五步：在项目根目录创建一个index.html文件，作为入口文件

<!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>Document</title>
</head>
<body>
    <h1>我是入口文件</h1>
</body>
</html>

第六步：安装需要使用的插件

1.  找到需要使用插件并安装他
    -   命令：npm install --save-dev  html-webpack-plugin
2.  在webpack.config.js中引入他
    -   const   HtmlWebpackPlugin=require(‘html-webpack-plugin‘)
3.  在plugins选项中调用他，并按照他的文档中区做配置
    -   //插件，将index.html文件自动打包到dist文件夹里面
                plugins:[
                    //自动生成一个index.html文件在出口位置，并且会自动在生成的文件中引入打包的js文件
                    new HtmlWebpackPlugin({});
                ]

第七步：在项目根目录创建一个webpack.config.js文件（这是一个webpack的配置文件）

/**
五大核心
0. 模式 指定这次打包是大的开发环境用的包（不压缩），还是生产环境的包（压缩）。4.x版本的webpack支持的
1. 入口 指定webpack需要打包的项目的入口文件
2. 出口 打包之后生成的文件需要放到哪个位置
3. 加载器 默认情况下，webpack只是简单的打包js文件，如果需要打包css，img之类的文件则需要添加相对应的加载器，去处理这种类型的文件。
4. 插件 插件是加载器干不了的事情，就可以使用插件来干.

ps: 前三个，模式，入口，出口。必须配置
*/

//如何配置
//1. 就是在webpack.config.js文件中，暴露一个对象，使用commonjs方式暴露

const HtmlWebpackPlugin=require(‘html-webpack-plugin‘)
const path=require(‘path‘);
module.exports={
    //模式
    mode:‘development‘,//开发模式||production生成模式
    //入口
    entry:‘./src/index.js‘,//入口js文件的路劲，也可以使用绝对路径。但需要引入path模块
    //出口：
    output:{
        //出口文件必须使用绝对路径
        path:path.resolve(__dirname,‘./dist‘),//会在项目根目录下生成dist文件夹
        //设置文件打包之后的名字
        filename:‘bundle.js‘
    },
    //插件，将index.html文件自动打包到dist文件夹里面使用HtmlWebpackPlugin插件，可以在webpack文档查询
    plugins:[
        //因为插件可能是多个，所以使用数组类型
        //自动生成一个index.html文件在出口位置，并且自动在生成的文件中引入js文件
        //详细配置可以在webpack官网的插件选项里面找到
        //https://github.com/jantimon/html-webpack-plugin#configuration
        new HtmlWebpackPlugin({
            filename:‘entry.html‘,
            //让这个文件内容和根目录的html完全一致
            template:‘./index.html‘,
        })
    ]
}

第八步：打包

  没有全局安装webpack要执行下列命令。否则直接$webpack
  1.  ./node_modules/.bin/webpack
  2.  npx webpack(npm 5.x+新增的功能)
  3.  配置package.json的npm脚本

项目目录

项目的目录结构
1  dist    （最终生成的文件，这个文件夹才是最终需要上传到服务器上的代码）
3   node_modules（放资源包）
4  src     (源文件，需要被webpack打包的文件，都需要放在这个文件夹下面，都是一些自己写的项目模块)
    -   index.js    （这个是项目打包入口）
5   index.html  （这个是我们的项目页面入口）
6  packge-lock.json(包锁文件)
7  packge.json（项目依赖的资源包与项目的描述信息的文件）
8  webpack.config.js(webpack的配置文件)

上面三个文件，这三个文件都不是真正需要上线（将项目放到服务器）的内容。于是我们需要webpack打包（抽取其中真真需要用的内容）

以上是关于webpack基本操作的主要内容，如果未能解决你的问题，请参考以下文章

Vue报错：Uncaught TypeError: Cannot assign to read only property 'exports' of object 的解决方法(代码片段

如何使用webpack加载库源映射？

VSCode自定义代码片段——git命令操作一个完整流程

VSCode自定义代码片段15——git命令操作一个完整流程

VSCode 如何操作用户自定义代码片段（快捷键）