Webpack的基础练习及使用

阅读文章：公司的老大哥儿写的给我们小菜鸡前端阅读的，对着他的思路和webpack官方练习使用 。

安装配置，以及一个简单的打包 

1. mkdir projectname //新建一个文件夹
2. cd projectname //进入文件夹
3. npm 的安装和换源可以看 这篇文章
4. npm init -y //使用npm初始化项目,x形成的文件package.json用来记录项目中使用到的插件 及其版本。
5. yarn add webpack webpack-cli --dev  //安装webpack工具和脚手架
6. 在package.json里面去更改项目的入口（这里可以理解为的项目里面的js不管通过什么方式引入最终集中在这个文件里面）
7.  webpack的默入口文件是 ./src/index.js（这个文件是你不在webpack.config.js配置也能生效的默认入口），但你可以通过在 webpack.config.js 中配置 entry 属性，来指定一个（或多个）不同的入口起点。

webpack.config.js 文件

module.exports = {
  mode:"development",
  entry: './path/to/my/entry/file.js',
};

我们创建项目后，安装了webpack的相关工具，在打包之前我们要知道，首先webpack打包是有一个入口文件(entry)默认文件位置./src/index.js，其次我们在webpack.config.js文件里面指定mode（告知 webpack 使用相应模式的内置优化），出口文件(output)也有个他的默认文件位置是./dist/main.js，确定以上有进有出现后 你可以执行一次打包，使用$ webpack，结果就是在项目下生成一个dist文件夹，文件夹生成main.js文件。这是最简单的webpack的使用。

检验webpack是否打包成功。在src下创建一个index.html文件 。<script src="../dist/main.js"/>引入文件，在浏览器运行index.html文件后，可以开发者模式检查引入情况。

关于打包指令的替换

在package.json文件里面去配置指令，最终实现用npm+dev去替代webpack，或者yarn  dev去替代。最终用那个，主要依赖于你的项目是由哪个工具（npm,yarn）构建的,我这里的最终是执行yarn dev的 。

webpack.config.js文件配置的解读

 webpack可以开箱即识别 js文件和json文件，次配置文件也是.js文件，此配置最终会导出（使用export导出）一个webpack配置的对象。

• 配置文件在什么时候被使用，在执行webpack时候被使用，如果想要执行其他名称的配置文件，需要在package.json文件里面进行配置。

  "scripts": {
    "build": "webpack --config prod.config.js"
  }
  选

• xiangz使用该文件来修改默认入口和默认出口文件。

  const path = require('path');  //导入node.js中专门操作路径的模块
  module.exports = {
    entry: './src/index.js', //入口文件
    entry: path.join(__dirname,"./src/index.js"),//选其中一个的写法
    output: {
      path: path.join(__dirname, 'dist'),
      path: path.resolve(__dirname, 'dist'),//两个path选其中一个
      filename: 'my-first-webpack.bundle.js', //最终生成文件名
    },
  };

 配置本地热启动服务器

1.安装webpack-dev-server插件,实现自动打包与启动本地服务器

yarn add webpack-dev-server@last --dev  //需要4.X

在package.json文件里面配置

"scripts": {
    "dev": "webpack-dev-server",
    "test": "echo \"Error: no test specified\" && exit 1"
  },

2.配置默认预览页面,安装html-webpack-plugin插件

yarn add html-webpack-plugin@last --dev //安装4.x的版本，3.x的版本与webpack-cli4.x不兼容

 3.对webpack.config.js文件的配置

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
    mode:"development",
    entry: path.join(__dirname,"./src/index.js"),//设置入口文件路径
    output:{
       //设置输出文件路径
       path:path.join(__dirname,"./dist"),
       //设置输出文件名称
       filename:"bundle.js"
    },
    devServer: {
        // 本地服务器代理
        compress: true,
        port: 8089, // 配置端口
        hot: true, // 配置热更新
    },
    plugins:[
        new HtmlWebpackPlugin({
            //设置生成预览页面的模板文件
            template:"./src/index.html",
            //设置生成的预览页面名称,该文件存在于内存中,在目录中不显示
            filename:"index.html"
        })
    ]
}

在控制台输入，yarn dev，主要 这个时候pakage.json里面的script中的

"dev": "webpack-dev-server"

控制台显示成功后

 打开浏览器，输入对应端口号的地址就好嘞！！！我的地址就是https://localhost:8089