webpack安装及卸载常用命令及问题总结

=====持续更新中=====

小白新学习，如有描述不当，请见谅~~，期待你的宝贵学习意见。

---

webpack功能：压缩、打包、多文件的编译、脚手架、生成

使用webpack打包工具可以打包压缩文件，使得不被浏览器兼容的语法打包为浏览器兼容的语法。

在项目目录下，执行命令

npm init -y

npm init 用来初始化生成一个新的 package.json 文件。它会向用户提问一系列问题，如果你觉得不用修改默认配置，一路回车就可以了。如果使用了 -f（代表force）、-y（代表yes），则跳过提问阶段，直接生成一个新的 package.json 文件。

npm install webpack --save-dev

将webpack模块安装到项目目录下，会在package.json的devDependencies属性下添加webpack，可以在package.json中看到安装的版本信息，如下图。

在cmd中进入项目根目录，输入webpack -v命令，得到提示：‘’webpack不是内部或外部命令，也不是可运行的程序........。

这是由于webpack 4x以上，webpack将命令相关的内容都放到了webpack-cli，所以还需要安装webpack-cli；

npm install --save-dev webpack-cli

安装完成后，继续输入webpack -v命令，还是得到提示：‘’webpack不是内部或外部命令，也不是可运行的程序.........。

以上还不成功，接着继续输入以下两条命令

npm install --global webpack

npm install --global webpack-cli

之后，继续输入webpack -v命令，即可成功查看webpack的版本，希望以上操作对你有用~

接着直接在命令窗输入webpack就可以对项目进行打包，

注意webpack.config.js配置

webpack.config.js：

1.mode:

  none          不优化

  development   输出调试信息，设置process.env.NODE_ENV

  production    最高优化，启用压缩、忽略错误

 

2.entry：入口

  单入口——单页Web应用（single page web application，SPA）

  多入口——多页面应用 (Multi-page Application，MPA）

 

3.output：输出

  {

    path: 路径——必须是绝对路径   path.resolve

    filename: 文件名

  }

const path=require('path');

module.exports={
  mode: 'development',
  entry: {
    index: './src/index',
    news: './src/news'
  },
  output: {
    path: path.resolve(__dirname, 'dest'),
    filename: '[name].js'
  }
};