webpack入门保姆级指南

最新推荐文章于 2024-08-18 23:54:05 发布

fiona_0427

最新推荐文章于 2024-08-18 23:54:05 发布

阅读量148

点赞数

文章标签： html5 node.js

本文链接：https://blog.csdn.net/fiona_0427/article/details/107010955

版权

一、安装

1.生成项目配置文件—package.json

npm init

2.全局安装

npm install webpack webpack-cli -g

ps：

webpack：做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其打包为合适的格式以供浏览器使用。

3.项目下安装

npm install webpack webpack-cli --save-dev

ps：即，先在全局装一次，以后每次在项目下再装一次。

"–save-dev"的缩写为“-D”

而”–save“的缩写为”-S“—

会把这两个模块以及这两个模块依赖的其他模块都装在node_modules里

4.查看版本号确认安装成功

webpack -v
webpack-cli -v

二、使用

1.在项目下创建src文件夹，放项目的源代码，如index.js文件

/src/index.js
console.log("111")

2.在终端运行

webpack

会自动读取src文件夹下的index.js进行打包，生成新文件夹—dist，dist文件夹中有打包后行成的main.js文件。

package.json文件里的

"main": "index.js"

规定项目的入口文件为index.js

三、配置

1.新建配置文件webpack.config

webpack.config.js其实是一个一个配置文件，这个配置文件其实也是一个简单的JavaScript模块，我们可以把所有的与打包相关的信息放在里面，规定如何打包。

webpack.config文件外层是

module.exports = {

}

2.规定入口

module.exports = {
	//单入口
	 entry: 'src/index.js'
	 //或多入口配置
    entry: {
     myhome: path.resolve(__dirname, "src/home/main.js"),
     myabout: path.resolve(__dirname, "src/about/main.js")
    }
}

3.规定出口

module.exports = {
  entry: './src/index.js',
  //单出口
  output: {
    path: __dirname+ '/dist',//打包好的文件存放的路径
    filename: 'myindex.js'//打包文件名
  }
  //多出口配置
    output:{
            //输出的路径，用了Node语法
            path:path.resolve(__dirname,'dist'),
            //输出的文件名称
            filename:'[name].js' //filename:"[name].js"//多入口对应的多出口 。 出口文件名字:[name]是一种关键字 代表入口文件的名字,多入口文件名字没有写就默认为main  [hash:6]代表生成哈希值,6代表保留6位
    }
};

单入口时[name]关键字默认为main，多入口时[name]关键字为文件名（属性名）。

[hash:6]代表生成哈希值,6代表保留6位，可使相同的文件使用不同的名字，保证每次去服务器请求都能拿到文件（即使是相同的文件）。

可在dist目录下创建前端项目，直接引用打包好的文件

/dist/index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="myindex.js"></script>
    <title>Document</title>
</head>
<body>
    
</body>
</html>

4.使用加载器

通过使用不同的loader，将所有类型的文件，转换为应用程序的依赖图（和最终的 bundle）可以直接引用的模块----帮我们解析node读不懂的某些文件。

为了加载css文件，需要先安装

cnpm install --save-dev style-loader css-loader mini-css-extract-plugin

其中

a: css-loader只是帮我们解析了css文件里面的css代码，

b: 而style-loader就是帮我们直接将css-loader解析后的内容挂载到html页面当中，

c: mini-css-extract-plugin为插件

为了加载文件（图片，视频等），需要先安装

npm install --save-dev file-loader

图片有两种引入途径：1）.js中img标签的src，2）.css中background-image的url

 module: {
        rules: [
            {test: /\.css$/, use: ['style-loader', 'css-loader']},
            {test: /\.(png|svg|jpg|gif)$/,use: ['file-loader']},
          
        ]
    },

5.使用插件

使用步骤

（1）下载

（2）用require引入

（3）在module.exports中的plugin字段中暴露出来

mini-css-extract-plugin

mini-css-extract-plugin按照遇到了.css结尾的文件就会启动MiniCssExtractPlugin去加载css文件按照css的link的方式挂载然后启动css-loader去加载css编码。使用时将style-loader换成MiniCssExtractPlugin.loader即可

//下载
cnpm install --save-dev mini-css-extract-plugin
//引入
const MiniCssExtractPlugin=require("mini-css-extract-plugin")
//插件
plugins:[new MiniCssExtractPlugin({filename:'./dist/css/[hash:6].css'})]
//加载器
module: {rules: [{test: /\.css$/,use: [ MiniCssExtractPlugin.loader,'css-loader']]}



 module: {
        rules: [
            // {test: /\.css$/, use: ['style-loader', 'css-loader']},
            {test: /\.(png|svg|jpg|gif)$/,use: ['file-loader']},
            {test: /\.css$/,use: [ MiniCssExtractPlugin.loader,'css-loader']}
        ]
    },
 plugins:[new MiniCssExtractPlugin({filename:'[name][hash:6].css'})]

使用时切记，如果有多个css文件，打包后的文件名不能相同

2.html-webpack-plugin

为html文件中引入的外部资源如script、link动态添加每次compile后的hash，防止引用缓存的外部文件问题
可以生成创建html入口文件，比如单页面可以生成一个html文件入口，配置N个html-webpack-plugin可以生成N个页面入口

//下载
  cnpm install --save-dev html-webpack-plugin
  //引入
   const path = require('path');
   //插件
   plugins: [
    new HtmlWebpackPlugin({
            hash:true,				//为所有包含的脚本和CSS文件附加唯一的编译哈希，这对缓存清除很有用
            filename: 'index.html', //输出的html的文件名称
            template: './src/index.html',    //html模板所在的文件路径
            inject: 'body',         //引入js的位置:引入js的位置:  'head'-头部引入 'body'/true--</body>之前引入 false不引入
            minify: {				  //压缩项配置
              removeComments: true, //是否清除HTML注释   默认false
              collapseWhitespace: true, //是否去除空格，默认false 
              removeScriptTypeAttributes: true, //删除script的类型属性，在h5下面script的type默认值：text/javascript 默认值false
              removeStyleLinkTypeAttributes: true, //删除style的类型属性， type="text/css" 同上 
              minifyJS: false, //是否压缩html里的css（使用clean-css进行的压缩） 默认值false；
              minifyCSS: true //是否压缩html里的js（使用uglify-js进行的压缩）
            }
    })
  ]

3.clean-webpack-plugin

修改js文件后，不用手动删除旧的打包好的文件,直接打包，会自动删除上一次的

//下载
cnpm install clean-webpack-plugin --save-dev
//引入
const {CleanWebpackPlugin} = require('clean-webpack-plugin'); 
//插件
 plugins: [
    new CleanWebpackPlugin()
 ]

四、开启观察模式

观察文件是否更新，如果文件更新，则代码每次修改后会自动打包

使用webpack --watch代替webpack命令进行打包，原文件修改完毕，会自动打包，手动刷新页面可以看到修改后的样式

五、webpack服务器

虽然webpack提供了webpack --watch的命令来动态监听文件的改变并实时打包，输出新bundle.js文件，这样文件多了之后打包速度会很慢，此外这样的打包的方式不能做到hot replace热更新，即每次webpack编译之后，你还需要手动刷新浏览器。

webpack-dev-server其中部分功能就能克服上面的2个问题。webpack-dev-server主要是启动了一个使用express的Http服务器。它的作用主要是用来伺服资源文件。此外这个Http服务器和client使用了websocket通讯协议，原始文件作出改动后，webpack-dev-server会实时的编译，但是最后的编译的文件并没有输出到目标文件夹。

ps：启动webpack-dev-server后，在目标文件夹中是看不到编译后的文件的,实时编译后的文件都保存到了内存当中。

//下载
cnpm install --save-dev webpack-dev-server
//配置
 module.exports = {
    entry: {
      app: './src/index.js',
      print: './src/app.js'
    },
   
+   devServer: {
+     contentBase:'./dist',
+	  host: 'localhost',
+	  compress: true,
+	  // inline: true,
+	  port: 8080,
+	  open: true,
+	  hot: true
+   },
.........

  };
  //添加一个 script 脚本，可以直接运行开发服务器(dev server)
  //package.json下
  {
  +     "dev": "webpack-dev-server --open --inline --progress --config webpack.config.js",
+     "start": "npm run dev"
  }

之后就可以通过npm run dev命令来打开服务器，此时，在源文件修改的样式保存后，页面会自动刷新并进行显示（只有第一次修改浏览器会自动刷新，之后修改都需要手动刷新浏览器）

fiona_0427

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
webpack入门保姆级指南

一、安装1.全局安装npm install webpack webpack-cli -gps：webpack：做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其打包为合适的格式以供浏览器使用。2.项目下安装npm install webpack webpack-cli --save-devps：即，先在全局装一次，以后每次在项目下再装一次。"–save-dev"的缩写为“-D”而”–save“
复制链接

扫一扫