项目学习1——webpack配置

webpack 安装

也可见 webpack 官网

1、开始安装

　　首先我们创建一个目录，初始化 npm，然后在本地安装 webpack 接着安装 webpack-cli（此工具用于在命令行中运行 webpack）：

mkdir webpack-demo && cd webpack-demo
npm init -y
npm install webpack webpack-cli --save-dev

　　　　--save-dev 表示在本地的dev环境中安装依赖

　　现在我们将创建以下目录结构、文件和内容：

　　在根目录创建 webpack.config.js，用于webpack配置。创建入口文件：src/index.js，出口文件：dist/index.html。

2、基本配置　　

　　webpack是一个基于Node的模块打包器，js，css，less等都算是模块，它会识别这些模块然后将其打包成为合适的格式以供浏览器使用。也就是说通过入口文件找到各个模块，使用loader（加载器）进行处理，然后打包成为一个浏览器可识别的js文件（一般就是dist/dundle.js）

　　先来说简单的入口，出口配置
　　webpack.config.js

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

执行webpack命令不是很方便，于是采取 npm 脚本的方式运行，在package.json配置如下：

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

　　src/index.js

function component() {
    var element = document.createElement('div');
    
    element.innerHTML = 'hello';
  
    return element;
  }
  
  document.body.appendChild(component());

dist/index.html

<!doctype html>
<html>
  <head>
    <title>project-test</title>
  </head>
  <body>
      <script src="bundle.js"></script>
  </body>
</html>

之后可以直接 npm run start 来运行项目。需要手动打开 dist/index.html页面，就可以看到页面的正常显示。

3、配置devServer

webpack-dev-server 为你提供了一个基本的 web server，并且具有 live reloading(实时重新加载) 功能。设置如下：

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

在webpack.config.js中配置如下：

devServer: {
            host: 'localhost',
            //指定使用一个 host，默认是 localhost，如果你希望服务器外部可访问，制定如下: host: "0.0.0.0"
            // localhost是一个在计算机网络中用于表示“此计算机”的主机名。
            port: 9000,
            // 指定监听请求的端口号：
            static: './dist'
            // 该配置项允许配置从目录提供静态文件的选项（默认是 'public' 文件夹）。将其设置为 false 以禁用。
        }

　　以上配置告知 webpack-dev-server，将 dist 目录下的文件 serve 到 localhost:9000 下。（译注：serve，将资源作为 server 的可访问文件）

在package.json中修改start配置

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack serve --open"
  },

3.1 source-map

　　Source Map 就是一个信息文件，里面储存着位置信息。也就是说，Source Map 文件中存储着代码压缩混淆前后的对应关系。有了它，出错的时候，除错工具将直接显示原始代码，而不是转换后的代码，能够极大的方便后期的调试。

　　webpack 开发环境下的 Source Map：在开发环境下，webpack 默认启用了 Source Map 功能。当程序运行出错时，可以直接在控制台提示错误行的位置，并定位到具体的源代码：

　　默认Source Map 的问题：开发环境下默认生成的Source Map，记录的是生成后的代码的位置。会导致运行时报错的行数与源代码的行数不一致的问题。示意图如下

　　解决默认Source Map 的问题：开发环境下，推荐在webpack.config.js 中添加如下的配置，即可保证运行时报错的行数与源代码的行数保持一致：

　　webpack 生产环境下的Source Map：在生产环境下，如果省略了devtool 选项，则最终生成的文件中不包含Source Map。这能够防止原始代码通过Source Map 的形式暴露给别有所图之人。

　　只定位行数不暴露源码：在生产环境下，如果只想定位报错的具体行数，且不想暴露源码。此时可以将devtool的值设置为nosources-source-map。实际效果如图所示：

　　采用此选项后：你应该将你的服务器配置为，不允许普通用户访问source map 文件！

　　Source Map 的最佳实践：

　　　　① 开发环境下：建议把 devtool 的值设置为 eval-source-map 好处：可以精准定位到具体的错误行。

　　　　② 生产环境下：建议关闭 Source Map 或将 devtool 的值设置为 nosources-source-map 好处：防止源码泄露，提高网站的安全性。

3.2、HtmlWebpackPlugin

　　html-webpack-plugin 的作用：

　　　　当使用 webpack打包时，创建一个 html 文件，并把 webpack 打包后的静态文件自动插入到这个 html 文件当中。
　作为开发依赖安装　　　

 npm install --save-dev html-webpack-plugin

　　在 webpack.config.js 中配置

const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports  = {
  ...
  plugins: [new HtmlWebpackPlugin()]
};

　　以上配置中，首先使用了require引入插件，首字母开头表明是一个构造函数，而后使用new语句创建一个实例，并将其作为webpackConfig的plugins选项的一个数组成员，这样表示webpack打包时将使用HtmlWebpackPlugin插件。
这里没有做HtmlWebpackPlugin的任何额外配置，实际上它的默认配置将会生效。
4、引入各种依赖

4.1、css/less

npm install --save-dev style-loader css-loader
npm install --save-dev less less-loader

    // webpack 自身只能理解js,引入loader可以将所有类型的文件转换为webpack可以识别的有效模块。
    // loader有两个目标， 
    //  test 用于标识出应该被对应的 loader 进行转换的某个或某些文件
    //  use 表示进行转换时，应该使用哪个 loader。   
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    'style-loader',
                    'css-loader'
                ]
            },
            {
                test: /\.less$/,
                use: [
                    'style-loader',
                    'css-loader',
                    'less-loader'
                ]
            }
        ]
    }

4.2、加载图片/字体

npm install --save-dev file-loader

{
     test: /\.(png|svg|jpg|gif)$/,
     use: [
         'file-loader'
     ]
},
{
     test: /\.(woff|woff2|eot|ttf|otf)$/,
     use: [
          'file-loader'
     ]
}

试用一下依赖 css

在 src 下创建一个 index.css

.changeColor {
    color: green;
}

在 src/index.js 中添加类名 changgeColor 同时引入 css 文件

import './index.css'

function component() {
    var element = document.createElement('div');
    element.innerHTML = 'hello Wold';
    element.classList.add('changeColor');

    return element;
}

document.body.appendChild(component());

最后运行 npm run start

参考自：https://blog.csdn.net/zr15829039341/article/details/85252846

　　　　https://www.jianshu.com/p/11037700ac3b

　　　　https://blog.csdn.net/u012443286/article/details/93363949

posted @ 2022-01-10 15:21 山海南坪阅读(104) 评论(0) 编辑收藏举报

刷新页面返回顶部

山海南坪

项目学习1——webpack配置

3、配置devServer

公告