Webpack4 创建项目以及打包一个JS文件，知识点总结+面试题解析结束一次完整的面试流程就是这样啦，小编综合了腾讯

结束

一次完整的面试流程就是这样啦，小编综合了腾讯的面试题做了一份前端面试题PDF文档，里面有面试题的详细解析，分享给小伙伴们，有没有需要的小伙伴们都去领取！

开源分享：docs.qq.com/doc/DSmRnRG…

npm ERR! Refusing to install package with name "webpack" under a package

4、安装 webpack-cli (webpack-cli 安装与上面 webpack 一样，已经安装全局的就不需要在安装了，没有安装过的可以通过下面命令安装)

$ npm install webpack-cli --save-dev

5、安装 webpack-dev-server

$ npm install webpack-dev-server --save-dev

6、在 webpack 文件夹里新建一个 webpack.config.js，文章底部有 webpack.config.js 配置详解，初始化它的内容：

var config = {

};

module.exports = config;

7、在当前 webpack 目录创建一个 main.js (文件名随意) 文件，main.js 文件文件里面随便放点内容

console.log('dzm');

8、创建好 main.js 之后，我们需要配置一下 webpack.config.js

var config = {

// 入口文件

entry: {

main: './main.js'

// 输出配置

output: {

// 输出得到的文件，文件名可以随意写

filename: 'dzm.js'

// 也可以直接写成这样，name 是文件原名，hash:5 会有5个随机字符，然后这成新的文件名

// filename: '[name].[hash:5].js'

}

};

module.exports = config;

9、起这个时候我们就已经具备打包条件了，可以测试一下打包

$ webpack

运行打包命令后则文件夹内会多出一个 dist 文件夹，这个就是打包之后得到的文件：

10、webpack.config.js 文件其实也可以随便建一个 js 文件代替，内部内容还是一样，比如我创建一个 webpack.conf.js 里面内容配置还是跟 webpack.config.js 一样，当你使用上面 webpack 命令打包时，默认使用的是 webpack.config.js，如果你想通过 webpack.conf.js 打包时，只需要在后面加上指定的配置文件名打包就行：

$ webpack --config webpack.conf.js