Webpack的基础配置以及使用脚手架创建工程

Webpack创建工程步骤：
一、模块化
Nodejs（require、module.exports）

ES6 (import、export)

二、webpack是一个打包工具

1.在项目中安装webpack

npm init -y

初始化工程化。这个命令完成之后，会在项目中创建一个package.json文件（包管理文件）

下载webpack

npm install webpack webpack-cli --dev (development -- 开发阶段使用的包)
npm i webpack webpack-cli -D

package.json 文件中scripts

"scripts": {
   "build": "webpack"
}

2.完成更加复杂的打包工作（css文件）
在项目中添加 webpack.config.js 文件

module.exports = {
  entry: "./src/index.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "bundle.js"
  }
}

对css文件处理

npm install style-loader css-loader -D 

配置webpack.config.js

module.exports = {
  entry: "./src/index.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "bundle.js"
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"]
      }
    ]
  }
}

3. 完成更加复杂的打包工作（scss/less文件）
安装less、less-loader

npm install less less-loader -D

   配置webpack.config.js

module.exports = {
  entry: "./src/index.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "bundle.js"
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"]
      },
      {
        test: /\.less$/,
        use: ["style-loader", "css-loader", "less-loader"]
      }
    ]
  }
}

4.完成对图片的打包
     安装ulr- loader和file-loader

npm install url-loader file-loader -D

     配置webpack.config.js

module.exports = {
  entry: "./src/index.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "bundle.js"
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"]
      },
      {
        test: /\.less$/,
        use: ["style-loader", "css-loader", "less-loader"]
      },
      {
        test: /\.(jpg|png|gif|jpeg|webp|svg|woff)$/,
        use: "url-loader" // url-loader 会自动调用file-loader
      }
    ]
  }
}

5.将index.html文件拷贝到dist中
       插件 （html-webpack-plugin）

npm install html-webpack-plugin -D

        配置webpack.config.js

const htmlWebapckPlugin = require("html-webpack-plugin")
module.exports = {
  entry: "./src/index.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "bundle.js"
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"]
      },
      {
        test: /\.less$/,
        use: ["style-loader", "css-loader", "less-loader"]
      },
      {
        test: /\.(jpg|png|gif|jpeg|webp|svg|woff)$/,
        use: "url-loader" // url-loader 会自动调用file-loader
      }
    ]
  },
  plugins: [
    new htmlWebpackPlugin({
      template: './index.html'
    })
  ]
}

6. 服务器工具 (将bundle.js 和index.html打包到了内存中)
安装

npm install webpack-dev-server -D

   配置package.json

"scripts": {
  "dev": "webpack-dev-server",
  "serve": "webpack-dev-server"
}

三、webpack在Vue项目中使用

npm install vue@2 --save(在开发和上线阶段都要使用)

npm install vue-loader@15 vue-template-compiler -D

四、脚手架搭建工程
   Vue-cli是vue官方出品的快速构建单页应用的脚手架，能让我们更快的开始项目。

首先我们切换最新的淘宝镜像

npm config set registry https://registry.npmmirror.com

下载脚手架工具

npm install @vue/cli -g

vue --version

使用脚手架安装工程`

vue create 工程名称

详细配置根据项目需要，更建议使用Vue UI配置

五、将代码自动保存成ESLint规定的代码
要安装ESLINT插件

要将工程的根目录放入vscode进行开发

升级VScode到最新版本

在首选项-> 设置->setting.json

"eslint.autoFixOnSave": true,
    "eslint.validate": [
        "javascript",
        "javascriptreact",
        {
            "language": "html",
            "autoFix": true
        },
        {
            "language": "vue",
            "autoFix": true
        }
    ],
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
    }

重启Vscode

六、使用UI界面化进行创建工程
​ vue ui