webpack

一.webpack起步

1.1 基本

创建两个文件夹，分别为src和dist，其中，src文件夹用于存放开发的源码，dist文件夹用于存放打包后的文件

src文件夹中创建main.js入口文件与其它依赖文件，webpack会自动将相关的文件都处理成浏览器可以解析的文件（bundle.js文件），类似下图，入口文件可以放在外面

dist文件夹中创建bundle.js文件，该文件在设置webpack相关配置后为自动生成，项目最终就是引用的这个文件

1.2 配置webpack的入口，出口文件（js文件）

const path = require("path") //用于设置绝对路径
module.exports = {
   
    //入口路径
    entry: "./src/main.js",
    //出口路径
    output: {
   
        path:path.resolve(__dirname, "dist"),
        filename: "bundle.js"
    }
}

设置后在终端输入webpack可以自动生成/更新bundle.js文件

tip： package.json文件是用npm init生成的，npm run build会执行script脚本中的build里的东西，而此时是优先执行本地的而不是全局的

1.3 设置css文件

1.在入口文件中依赖css文件

//依赖css文件
//此处不用声明变量，因为不会用到
require("./css/style.css")

2.安装css-loader和style-loader

npm install --save-dev css-loader //--save-dev的意思是在开发中使用
npm install --save-dev style-loader

3.然后在webpack.config.js文件中进行配置（在配置出入口文件后）

    //配置css部分
    module:{
   
        rules:[
            {
   
                test:/\.css$/,
                //css-loader负责将css文件加载，style-loader负责将样式添加到dom中
                //style-loader排在前面是因为，使用多个loader时，是从右向左
                use:["style-loader","css-loader"]
            }
        ]
    }

此时在终端执行npm run build命令后，即可让css文件生效

tip：此时如果报错UnhandledPromiseRejectionWarning: TypeError: this.getResolve is not a function，则表示style-loader,css-loader的版本过高，手动下调一下版本即可

//这是我用的版本
 "devDependencies": {
   
    "css-loader": "^3.3.0",
    "style-loader": "^1.0.0"
  }

随后在终端执行

npm install

问题解决

1.4 设置less文件

基本操作同上，只是要注意，在webpack.config.js文件中进行配置时，还可以采用这种写法

 module: {
   
 	rules:[{
   
		test:/\.css$/,
		use:[
			//这样是对象的写法，可以在里面写一些参数，如果需要的话
			//这样的顺序也是要注意的，less要先编译成css
			{
   loader:"style-loader"},
			{
   loader:"css-loader"},