Webpack入门(一)

Doublewater
78 阅读2分钟

  1. Webpack简介

    Webpack是一个模块打包工具,Webpack认为一切资源都是模块,JS文件,CSS文件,图像文件等等都是模块.Webpack会把这些都打包成一个JS文件.如果我们不想这些模块都合成一个JS文件,那么我们可以通过一些规则或者工具来改变最终的打包生成的文件.

  2. 安装Webpack5

    首先需要安装Node.js,这次用的是webpack@5.21.2和webpack-cli@4.5.0,一般都是本地安装,因为全局安装可能与本地的出现版本问题.
    安装命令:npm i webpack@5.21.2 webpack-cli@4.5.0 --save-dev

  3. Webpack快速入门

    3.1. Webpack的命令行打包

初始化文件 npm init -y 假如有a.js,b.js需要打包,其中a.js引入了b.js 项目目录:a.js,b.js,index.html,package.json. 打开index.html,这个时候index.html的引入a.js会失败,原因是浏览器对原生的ES6模块默认引入方式不支持,另一方面本地JS文件调用外部模块存在安全问题
命令行打包 :npx webpack --entry ./s.js -o dist ,这样就没什么事了

3.2. Webpack的打包模式 mode

mode一共有三种,production,development,none.

production是给生产环境打包使用的,打包生成的文件代码是压缩过的,developement不会压缩代码，可阅读性好，但是代码体积大.none不会压缩代码,保留打包的原始构建信息,

3.3. Webpack的配置文件
webpack.config.js是配置文件,在根目录下,Webpack会自动寻找该文件并使用其配置信息进行打包,如果找不到该文件就使用默认参数打包

var path = require('path');

module.exports = {
  entry: './a.js',
  output: {
    path: path.resolve(__dirname, ''),
    filename: 'bundle.js'
  },
  mode: 'none'
};

先引入path模块,这个是Node.js的路径解析模块,path.resolve()可以将接受的参数解析成一个绝对路径返回. 可以先简单的认为路径是__dirname/'' module.exports是Common.js的模块导出语法,它导出的是一个对象.
entry:入口文件
output:打包后的资源输出文件,path:输出的路径,filename:输出的名字 mode:打包模式

__dirname表示当前文件的路径.这个例子表示当前文件夹根目录的绝对路径

  1. 预处理器

    Loader:webpack只认识js和json文件,其他文件都需要loader转换,比如css文件,需要css-loader,style-loader.在js文件引入css文件是必须要用的,解析@import等css自身的语法.css-loader只是将css文件以字符串的方式打包到js文件中,还需要style-loader把JS的样式代码插入HTML文件的head标签. 比如如下配置这两个预处理器

var path = require('path');

module.exports = {
 entry: './a.js',  // a.js里引入了CSS文件
 output: {
   path: path.resolve(__dirname, ''),
   filename: 'bundle.js'
 },
 module: {
   rules: [{
     test: /\.css$/,
     use: ['style-loader', 'css-loader']
   }]
 },
 mode: 'none'
};
avatar
文章
阅读
粉丝