使用webpack来构建项目

 

1、在webpack的官网可以看到，webpack是一个 文件打包工具，它将复杂的的文件依赖打包成独立的资源文件。换句话说， 在webpack里一切文件都是模块，通过loader加载文件，通过plugin注入钩子，最后输出由多个模块组合的文件。那么loader是什么呢？loader用来读取各类资源，比如css、js等。模块loader可以链式调用，链汇总的每个loader都将对资源进行转换，然后将结果传递给下一个loader。

 

也就是说webpack使用loader来管理各类的资源。

 

2、使用webpack来管理资源 webpack.config.js

 

const path = require('path');


module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'dist'),
  },
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: ['style-loader', 'css-loader'],
      },
      {
        test: /\.(png|svg|jpg|jpeg|gif)$/i,
        type: 'asset/resource',
      },
      {
        test: /\.(woff|woff2|eot|ttf|otf)$/i,
        type: 'asset/resource',
      },
      {
        test: /\.(csv|tsv)$/i,
        use: ['csv-loader'],
      },
      {
        test: /\.xml$/i,
        use: ['xml-loader'],
      },
    ],
  },
};

 

 

需要注意的是需要保证 loader 的先后顺序： 'style-loader' 在前，而 'css-loader' 在后。如果不遵守此约定，webpack 可能会抛出错误

 

根据上面的配置中，webpack执行的时候就会把对应的文件当做是一个模块进行处理，你可以import对应的资源进行使用了。

 

 

2、 在安装一个 package，而此 package 要打包到生产环境 bundle 中时，你应该使用 npm install --save。如果你在安装一个用于开发环境的 package 时（例如，linter, 测试库等），你应该使用 npm install --save-dev

 

3、我们知道的是，webpack会生成bundle.js文件，那么，当某一个源文件中出现了一个错误，我们在开发的时候就无法定位到具体是哪一个源文件出错了。这个时候我们在开发环境下面使用 source map来定位问题。配置如下

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
  mode: 'development',//环境：分别为developement\production\none；对应着开发环境、生产环境以及无差别
  devtool: 'inline-source-map',
  entry: {//entry可以有多个入口文件
    index: './src/index.js',
    print: './src/print.js',
  },
  output: {
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, 'dist'),
    clean: true,//每次新构建之前都会清理一下输出的文件夹
  },
 
  module: {
    
  },
};

 

 

4、我们在使用vue搭建项目的时候，是不是每次修改了一个文件，vue就会自动帮我们重新编译构建并刷新浏览器来着？这是因为vue内置了一个webpack的配置。那如果我们不是使用vue来开发项目又想着可以自动编译和刷新呢？这里我们就可以使用webpack-dev-server来进行配置和搭建实现这个需求。

 

首先我们安装这个插件

npm install --save-dev webpack-dev-server

 

 

然后在配置文件中加入下面的代码

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
  mode: 'development',//环境：分别为developement\production\none；对应着开发环境、生产环境以及无差别
  devtool: 'inline-source-map',
  entry: {//entry可以有多个入口文件
    index: './src/index.js',
    print: './src/print.js',
  },
  plugins: [
     new HtmlWebpackPlugin({
       title: 'Development',
     }),
   ],
  output: {
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, 'dist'),
    clean: true,//每次新构建之前都会清理一下输出的文件夹
  },
  devServer: {
    contentBase: './dist',
    hot:true
  },
  module: {
    
  },
};

在package.json中加入下面的srcipt
{
  "name": "wepack-demo",
  "version": "1.0.0",
  "description": "",
  "private": true,
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack",
    "start": "webpack serve --open"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "css-loader": "^5.2.4",
    "html-webpack-plugin": "^5.3.1",
    "style-loader": "^2.0.0",
    "webpack": "^5.4.0",
    "webpack-cli": "^4.2.0",
    "webpack-dev-server": "^3.11.2"
  },
  "dependencies": {
    "loadash": "^1.0.0",
    "lodash": "^4.17.21"
  }
}

 

 

 

 

 

执行npm run start,可以看到自动编译和打开了浏览器，这个时候，修改任意文件都会重新刷新文件

 

这是因为配置中告诉了webpack-dev-server这个插件，将dist目录下面的文件可以通过localhost:8080这个地址可以访问到，webpack-dev-server在编译之后不会写入到任何输出文件。而是将bundle文件保留在内存里面，然后将它们当做是可以被访问的文件。

 

 

5、从上面的例子中，我们可以知道，webpack是可以将你的js文件全部打包到一个bundle文件里面，可是有的情况下面，我们不想要将所有的文件一次性引入进来，有些插件在需要的时候再引入。这个时候我们想到的是不是就是