关于webpack4.0的基本配置问题（3.0x→4.0x时遇到的各种问题）

1、初始化项目
npm init -y
2、安装webpack和webpack-cli
npm add webpack webpack-cli -D
//or
// npm i webpack webpack-cli -D -g
//webpack可以进行0配置
//打包支持js的模块化
3、创建src文件夹并在此文件夹下创建main.js文件
4、打包项目（需要设置model选项）

webpack 需要打包的文件 -o 打包完成后的文件 --mode development

//例如 webpack .\src\main.js -o .\dist\bundle.js --mode development
//–mode development开发者模式
//–mode production生产者模式
5、由于打包过程太麻烦，安装自动打包工具
cnpm i webpack-dev-server -D

//此时会报两（三）个错误，执行第六步
6、cnpm i webpack -D
7、在根目录创建webpack.config.js配置文件
并输入以下内容
var path = require(‘path’)

module.exports = {
entry: path.join(__dirname, ‘./src/main.js’), //入口文件
output: { //指定输出项
path: path.join(__dirname, ‘./dist’), //输出路径
filename: ‘bundle.js’ //指定输出文件的名称
},
}
8、终端继续输入webpack --mode development进行打包
//此时可以实现打包，但是不能实现实时构建
9、然后在webpack.config.js中加入以下内容
“scripts”: {
“dev”: “webpack-dev-server --mode development --open --port 3000 --contentBase src --hot”
}
10终端执行npm run dev时
//然后可能会出现类似的错误，
The CLI moved into a separate package: webpack-cli
Please install ‘webpack-cli’ in addition to webpack itself to use the CLI

Error: Cannot find module ‘webpack-cli/bin/config-yargs’
百度给的解决方案时npm install webpack-cli -g
试了一下并不行
继续尝试另一个方案npm install webpack-cli --save-dev
此时有报错了（而且是红色的错误，之前大多是灰色的）
//npm ERR! code ENOENT
//npm ERR! syscall rename
继续百度
运行 npm cache clean --force清除缓存，然后执行npm install webpack-cli --save-dev
或者还可以尝试删除 package-lock.json，再运行 npm install（重新下载依赖项），然后执行npm install webpack-cli --save-dev
此时错误消失
12、继续执行npm run dev
此时会报错
‘webpack-dev-server’ 不是内部或外部命令，也不是可运行的程序
或批处理文件。
//可是此时的package.json里是有’webpack-dev-server’ 的
//再次陷入沉思
继续百度
初步估计是由于npm cache clean --force清除缓存之后导致，node_modules中的文件发生了一些改变，
终端运行
npm install
好的继续报错
npm ERR! code EPERM
npm ERR! syscall unlink
npm ERR! path D:\vs\Vue学习\day06\03.webpack-study\node_modules.staging\sockjs-client-33d11523\dist\sockjs.min.js.map
npm ERR! errno -4048
…
npm ERR! The operation was rejected by your operating system.
npm ERR! It’s possible that the file was already in use (by a text editor or antivirus),
npm ERR! or that you lack permissions to access it.
npm ERR!
npm ERR! If you believe this might be a permissions issue, please double-check the
npm ERR! permissions of the file and its containing directories, or try running
npm ERR! the command again as root/Administrator.
//百度之后发现可能是由于权限不够，我是在vs code里的终端运行的程序(英语水平2级)
//以管理员身份打开cmd窗口之后，运行npm install，成功了！
13、继续执行npm run dev
终于成功了！！！，我感动的都快要落泪了，虽然就只是在浏览器的控制台输出了一个ok
等等，不对，控制台怎么还怎么还404了呢
Failed to load resource: the server responded with a status of 404 (Not Found) bundle.js:1
Failed to load resource: the server responded with a status of 404 (Not Found) :3000/favicon.ico:1
//继续看我的网课，别学webpack3.0+边改错
应该是index.html里引用的script标签里的bundle.js的问题，
要么更换路径为./bundle.js
或者直接注释掉，然后安装html-webpack-plugin
运行 cnpm i html-webpack-plugin -D
//注意如果不注释掉script src=“”直接运行cnpm i html-webpack-plugin -D是有可能会报错的
14、修改webpack.config.js里的配置
//由于webpack是基于node进行构建的，所以webpack中任何合法的node代码都是支持的
var path = require(‘path’)

//在内存中根据指定的模板页面，生成一份内存中的首页，同时自动把打包好的
//bundle注入到页面底部
//如果要配置插件需要在导出的对象中，挂载一个plugins节点
定义一个htmlWebpackplugin
var htmlWebpackplugin = require(‘html-webpack-plugin’)
新增一个和output同级的plugins对象
plugins: [
//所有webpack插件的配置节点
new htmlWebpackplugin({
template: path.join(__dirname, ‘./src/index.html’), //指定模板文件路径
filename: ‘index.html’ //设置生成的内存页面的名称
})
]
}
15、继续运行npm run dev
浏览器自动弹出，并且 控制台输出ok。
16、关于在webpack中引入样式（css等）
引入css文件
在src下新建css文件夹并在css里新建index.css样式表
写入以下样式
html,
body {
margin: 0;
padding: 0;
background-color: cyan;
}
并在main.js里写入以下内容
import ‘./css/index.css’
并在终端运行cnpm i style-loader css-loader -D
添加配置节点（与plugins同级）module
module: {
rules: [ //匹配所有第三方loader模块的
{ test: /.css$/, use: [‘style-loader’, ‘css-loader’] } //处理css文件的loader
]
}

引入less文件时
运行cnpm i less-loader less -D
在main中加入
import ‘./css/index.less’
引入scss文件时
运行cnpm i sass-loader node-sass -D
在main中加入
import ‘./css/index.scss’
（不引入就不要在main中导入文件）