详解webpack4.x之搭建前端开发环境


Posted in Javascript onMarch 28, 2019

webpack是一个现代JavaScript应用程序的静态模块打包器,借用官网的一张图,它能够将一些预处理语言,js的最新语法转换成浏览器识别的内容。现在一般的前端框架都有比较成熟的脚手架,大多数对webpack都有个较好的集成,我们只需要敲一些简单的命令就能生成一个通用的项目模板,比较便捷,但是要知其然知其所以然,所以今天就尝试着从零开始搭建一个前端开发环境。

详解webpack4.x之搭建前端开发环境

项目源码:

https://github.com/gerryli0214/webpack-demo

webpack的四个核心概念:

1.、入口(entry)

2、输出(output)

3、loader

4、插件(plugins)

首先,我们执行下npm init;初始化一个node工程,填写项目的信息,整个项目的目录结构如下:

详解webpack4.x之搭建前端开发环境

全部安装webpack-cli:

npm install webpack-cli -g

新建一个 webpack.config.js, 这个是webpack默认配置文件,在里面我们可以配置打包信息,初始化文件为:

const config = {};
module.exports = config;

入口(entry):

项目的入口文件,可以配置单个/多个,为入口文件的相对路径,type: string/object; 我们项目入口文件为index.js。

const config = {
  entry: './src/index.js'
}

module.exports = config;

输出(output):

打包后的文件路径和配置信息,path为打包文件路径,filename为输出文件名称,name为原始文件名称,hash为打包后的hash地址:

output: {
  path: path.resolve(__dirname, 'dist'),
  filename: '[name].[hash].min.js'
}

loader:

loader能够处理非JavaScript文件,webpack默认只能处理JavaScript文件。在使用loader时,首先要安装下指定loader的依赖,此部分的配置规则与之前版本有所差异,具体配置如下:

npm install babel-loader css-loader -D
module: {
    rules: [{
        test: /\.css$/,
        use: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: 'css-loader'
        })
      },
      {
        test: /\.js/,
        exclude: /node_modules/, //过滤node_modules文件夹
        use: [{
          loader: 'babel-loader'
        }]
      }
    ]
  }

插件(plugins):

插件是webpack最为强大的功能之一,利用插件,我们可以进行代码的混淆、压缩、重新定义项目环境变量等。插件分为webpack内置插件和第三方插件,第三方插件在使用时首先要安装依赖和导入依赖模块。详细的使用方法可以参考npm。下面罗列了几个项目中常用的插件:

html-webpack-plugin:

主要作用:

1、为html文件中引入的外部资源如 scriptlink 动态添加每次compile后的hash,防止引用缓存的外部文件问题

2、可以生成创建html入口文件,比如单页面可以生成一个html文件入口,配置多个就可以打包成多页面

extract-text-webpack-plugin:

主要作用:分离打包的css文件

uglifyjs-webpack-plugin:

主要作用:混淆js代码

webpack-bundle-analyzer:

主要作用:生成打包文件报告,可以看到各个模块打包后文件大小信息

clean-webpack-plugin:

主要作用:每次打包之前清除dist文件夹

配置信息如下:

const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
const CleanWebpackPlugin = require('clean-webpack-plugin');

const config = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].[hash].min.js'
  },
  module: {
    rules: [{
        test: /\.css$/,
        use: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: 'css-loader'
        })
      },
      {
        test: /\.js/,
        exclude: /node_modules/, //过滤node_modules文件夹
        use: [{
          loader: 'babel-loader'
        }]
      }
    ]
  },
  optimization: {
    splitChunks: {
      name: "vendor",
      filename: 'vendor-[hash].min.js'
    },
    minimizer: [new UglifyJsPlugin()]
  },
  plugins: [
    new HtmlWebpackPlugin({ template: './src/index.html' }),
    new ExtractTextPlugin({
      filename: 'build.min.css',
      allChunks: true,
    }),
    new webpack.BannerPlugin({
      banner: `构建时间:${new Date().getFullYear()}-${new Date().getMonth()+1}-${new Date().getDate()}`
    }),
    new CleanWebpackPlugin(),
    // new webpack.EnvironmentPlugin({ NODE_ENV: 'production' }),
    new BundleAnalyzerPlugin()
  ]
};

module.exports = config;

以上为打包的基础配置信息,在我们实际开发中,经常会用到前端开发服务,模块热更新以及前端的跨域请求代理,webpack中提供了webpack-dev-server来满足我们的需求,在使用之前先安装下webpack-dev-server的依赖:

npm install webpack-dev-server -D

具体文件配置如下:

devServer: {
    contentBase: path.join(__dirname, 'dist'),
    compress: true,
    host: '0.0.0.0',
    port: 9000,
    hot: true, //是否热更新
    proxy: { //代理
      '/api': 'http://localhost:3000'
    }
  }

package.json中启动命令配置如下:

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack-dev-server --mode development",
    "build": "webpack --mode production"
  }

执行npm run start,执行结果如下:

详解webpack4.x之搭建前端开发环境

这样开发环境我们的主要配置就完成了,但是当我们用uglifyjs压缩es6代码时,会发现会报错,因为uglifyjs不能压缩es6的代码,此时我们需要手动配置下babel,具体步骤如下:

1、安装项目依赖

npm install @babel/core @babel/preset-env -D

2、新建在项目根目录下 .babelrc 文件,填入以下配置信息

{
  "presets":["@babel/preset-env"]
}

执行npm run build,压缩项目代码,结果如下:

详解webpack4.x之搭建前端开发环境

全部代码:

const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
const CleanWebpackPlugin = require('clean-webpack-plugin');

const config = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].[hash].min.js'
  },
  module: {
    rules: [{
        test: /\.css$/,
        use: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: 'css-loader'
        })
      },
      {
        test: /\.js/,
        exclude: /node_modules/, //过滤node_modules文件夹
        use: [{
          loader: 'babel-loader'
        }]
      }
    ]
  },
  optimization: {
    splitChunks: {
      name: "vendor",
      filename: 'vendor-[hash].min.js'
    },
    minimizer: [new UglifyJsPlugin()]
  },
  plugins: [
    new HtmlWebpackPlugin({ template: './src/index.html' }),
    new ExtractTextPlugin({
      filename: 'build.min.css',
      allChunks: true,
    }),
    new webpack.BannerPlugin({
      banner: `构建时间:${new Date().getFullYear()}-${new Date().getMonth()+1}-${new Date().getDate()}`
    }),
    new CleanWebpackPlugin(),
    // new webpack.EnvironmentPlugin({ NODE_ENV: 'production' }),
    new BundleAnalyzerPlugin()
  ],
  devServer: {
    contentBase: path.join(__dirname, 'dist'),
    compress: true,
    host: '0.0.0.0',
    port: 9000,
    hot: true, //是否热更新
    proxy: { //代理
      '/api': 'http://localhost:3000'
    }
  },
  devtool: 'source-map'
};

module.exports = config;

参考资料:

webpack中文网: https://www.webpackjs.com

webpack内置插件列表: https://www.webpackjs.com/plugins/

第三方插件可自行搜索npm: https://www.npmjs.com/

项目源码:https://github.com/gerryli0214/webpack-demo

文笔比较粗糙,如有问题,烦请指出,谢谢!以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
根据IP的地址,区分不同的地区,查看不同的网站页面的js代码
Feb 26 Javascript
jQuery的显示和隐藏方法与css隐藏的样式对比
Oct 18 Javascript
javascript定时器完整实例
Feb 10 Javascript
详解jQuery UI库中文本输入自动补全功能的用法
Apr 23 Javascript
浅析Bootstrip的select控件绑定数据的问题
May 10 Javascript
JS实现将Asp.Net的DateTime Json类型转换为标准时间的方法
Aug 02 Javascript
JavaScript关联数组用法分析【概念、定义、遍历】
Mar 15 Javascript
create-react-app修改为多页面支持的方法
May 17 Javascript
微信小程序开发常见问题及解决方案
Jul 11 Javascript
Javascript 关于基本类型和引用类型的个人理解
Nov 01 Javascript
VSCode搭建React Native环境
May 07 Javascript
Vue中使用import进行路由懒加载的原理分析
Apr 01 Vue.js
详解Vue.directive 自定义指令
Mar 27 #Javascript
vue 列表页跳转详情页获取id以及详情页通过id获取数据
Mar 27 #Javascript
js取0-9随机取4个数不重复的数字代码实例
Mar 27 #Javascript
vue 详情跳转至列表页实现列表页缓存
Mar 27 #Javascript
vue中多个倒计时实现代码实例
Mar 27 #Javascript
JavaScript偏函数与柯里化实例详解
Mar 27 #Javascript
vue实现鼠标移入移出事件代码实例
Mar 27 #Javascript
You might like
Base64在线编码解码实现代码 演示与下载
2011/01/08 PHP
关于使用key/value数据库redis和TTSERVER的心得体会
2013/06/28 PHP
PHP file_get_contents设置超时处理方法
2013/09/30 PHP
PHP计算加权平均数的方法
2015/07/16 PHP
dwr spring的集成实现代码
2009/03/22 Javascript
javascript 模拟点击广告
2010/01/02 Javascript
使用 JScript 创建 .exe 或 .dll 文件的方法
2011/07/13 Javascript
nodejs 中模拟实现 emmiter 自定义事件
2016/02/22 NodeJs
JS组件Bootstrap实现下拉菜单效果代码
2016/04/26 Javascript
详解vue父子组件间传值(props)
2017/06/29 Javascript
angular2 ng2 @input和@output理解及示例
2017/10/10 Javascript
vue上传图片到oss的方法示例(图片带有删除功能)
2018/09/27 Javascript
Vuerouter的beforeEach与afterEach钩子函数的区别
2018/12/26 Javascript
Node.js学习教程之Module模块
2019/09/03 Javascript
Nuxt页面级缓存的实现
2020/03/09 Javascript
Vue+penlayers实现多边形绘制及展示
2020/12/24 Vue.js
Python中使用插入排序算法的简单分析与代码示例
2016/05/04 Python
Python进行数据提取的方法总结
2016/08/22 Python
Python使用plotly绘制数据图表的方法
2017/07/18 Python
python字符串反转的四种方法详解
2019/12/02 Python
python第三方库学习笔记
2020/02/07 Python
python梯度下降算法的实现
2020/02/24 Python
python2.7使用scapy发送syn实例
2020/05/05 Python
Tensorflow使用Anaconda、pycharm安装记录
2020/07/29 Python
Pandas数据分析的一些常用小技巧
2021/02/07 Python
突袭HTML5之Javascript API扩展1—Web Worker异步执行及相关概述
2013/01/31 HTML / CSS
联想新西兰官方网站:Lenovo New Zealand
2018/10/30 全球购物
int *p=NULL和*p= NULL有什么区别
2014/10/23 面试题
个人自我评价范文
2014/02/05 职场文书
建议书的格式
2014/05/12 职场文书
党员干部形式主义个人整改措施
2014/09/17 职场文书
甜品店创业计划书
2014/09/21 职场文书
2015年党风廉政建设责任书
2015/01/29 职场文书
Python关于OS文件目录处理的实例分享
2021/05/23 Python
SpringBoot快速入门详解
2021/07/21 Java/Android
Minikube搭建Kubernetes集群
2022/03/31 Servers