1. 首页
  2. IT资讯

Webpack 使用

简介

webpakc的定位实际上是打包器.而不是任务执行器.

当然也可以配合grunt进行使用. webpack也提供了便捷的打包流程,项目构建,插件管理等等.

为了更好的构建项目从开发到生产都一一提供了解决方案. Vue官方也推荐使用的vue-loader也是基于webpack的.

因此这里简单介绍一下webpack的使用一些总结.更详细细致的内容可以到官网进行拓展.

安装

局部安装

使用命令行的安装方式 :

npminstall--save-devwebpack

我们可以写到配置文件当中package.json,对应的目录中然后再执行npm install

{   "name": "XXXX",   "version": "1.0.0",   "description": "XXX",   "author": "XXX",   "private": true,   "scripts": {//指定执行命令     "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",     "start": "npm run dev",     "watch":"webpack --watch",     "build": "webpack --config webpack.prod.js",//也可以进行自定义     "debug": "nodemon build/build.js"   },   "dependencies": {     "swiper": "^4.0.7",     "vue": "^2.5.2",     "vue-router": "^2.8.1",     "element-ui": "2.2.1"   },   "devDependencies": {   } }

全局安装

npm install --global webpack

工程结构

我们可以根据项目的实际的情况设置目录.
一般情况下可以设置为源码目录,生产目录.

我们可以将webpack配置文件与package.json放入到项目的根目录.

webpack配置文件

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

目录结构如下:

1.webpack-demo

2.|- package.json

3.|- webpack.config.js

4.|- /dist

5.|- bundle.js

6.|- index.html

7.|- /src

8. /src|- index.js

9.|- /node_modules

资源管理

这里先简单介绍下CSS资源的管理配置.

安装loader,loader的作用就是将文件进行处理(编译,压缩).

1.npm install --save-dev style-loader css-loader   module.exports =      {     module: {       rules: [         {           test: /.css$/, //指定匹配文件,使用style-loader,css-loader           use: [             'style-loader',             'css-loader'           ]       }]      } }

输出管理

输出管理的目的是为了更好的简化工作.
我们可以使用插件,输出js名字更替等

webpack当中有许多的插件我么可以将其进行更替.

这边先简单介绍两个插件 生成html的插件,清除目录的插件.

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

整个配置文件,注意插件的配置顺序.

  const path = require('path');   const HtmlWebpackPlugin = require('html-webpack-plugin');   const CleanWebpackPlugin = require('clean-webpack-plugin');    module.exports = {     entry: {       app: './src/index.js',       print: './src/print.js'     },     plugins: [       new CleanWebpackPlugin(['dist']),//清除dist目录       new HtmlWebpackPlugin({ //生成一个html页面指定其title,然后会自动将js文件生成引入js代码         title: 'Output Management'       })     ],     output: {       //publicPath:XXX 可以资金定义路径,build后输出的内容将会放入到这个路径当中       filename: '[name].bundle.js', //注意name用方括号括起来,name的值对应的为entry的key值,这样为了区分多个文件        path: path.resolve(__dirname, 'dist')     }   };

开发工具

webpack 最强大的是开发提供的开发工具

webpack-server 提供了访问页面的服务

webpack-watch 提供了观察文件的变化

webpack-dev-middleware webpack-server内部也是采用了该方法,不仅如此,也提供了其它的自定义的功能很强大.

const path = require('path');   const HtmlWebpackPlugin = require('html-webpack-plugin');   const CleanWebpackPlugin = require('clean-webpack-plugin');    module.exports = {     entry: {       app: './src/index.js',       print: './src/print.js'     },     devtool: 'inline-source-map',    //devServer: {    //  contentBase: './dist'    //},     plugins: [       new CleanWebpackPlugin(['dist']),       new HtmlWebpackPlugin({         title: 'Output Management'       })     ],     output: {       filename: '[name].bundle.js',       path: path.resolve(__dirname, 'dist'),      publicPath: '/'//middleware会用到该路径,url访问的路径     }   };

————————————————

版权声明:本文为CSDN博主「代码界吴彦祖」的原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接及本声明。

原文链接:blog.csdn.net/lzx_victo

原文始发于:Webpack 使用

主题测试文章,只做测试使用。发布者:逗乐男神i,转转请注明出处:http://www.cxybcw.com/22323.html

联系我们

13687733322

在线咨询:点击这里给我发消息

邮件:1877088071@qq.com

工作时间:周一至周五,9:30-18:30,节假日休息

QR code