webpack
webpack的使用方式,及一些注意事项
Landing...
这个作者很懒,什么都没留下…
展开
-
webpack中babel的安装及配置
为什么要使用babel 虽然webpack可以打包js文件,但是一些高级语法是无法识别的,因此需要使用第三方工具babel-loader,高级js语言变成低级语言 babel的安装及配置 安装 npm install -D babel-loader @babel/core @babel/preset-env webpack npm i @babel/plugin-proposal-class-properties -D 配置 { test: /\.m?js$/, use: 'babel-loader'原创 2020-07-25 17:28:55 · 903 阅读 · 0 评论 -
webpack第三方loader的安装与配置
为什么需要第三方loader 因为webpack只能打包后缀名为js的文件,而后缀名为.css,.vue之类的就无法打包,所以需要第三方 第三方loader的安装与配置 所需安装工具 css 安装:npm i style-loader css-loader --D less 安装:npm i less-loader less -D scss 安装:cnpm i node-sass sass-loader -D url 安装:npm install file-loader url-loader原创 2020-07-25 17:13:51 · 149 阅读 · 0 评论 -
webpack中devServer的配置及使用
配置webpack.config.js 代码块 const path = require('path') module.exports = { // 指定打包文件的入口和出口 entry: path.join(__dirname, './src/main.js'), //入口文件,__dirname表示绝对路径 output: { //输出文件的相关配置 path: path.join(__dirname, './dist'), //路径 filena原创 2020-07-25 16:50:18 · 3280 阅读 · 0 评论 -
webpack打包工具的使用原理及基础使用方式
为什么要使用打包工具 1、项目需要引入的文件太多,发送的二次请求太多,网页加载速度变慢,可以通过打包工具压缩解决 2、可以处理文件之间的依赖关系 webpack打包工具的安装方式 全局安装:npm i webpack -g 项目安装:npm i webpack --save-dev 注意事项 1、webpack4以上需要安装webpack-cli,安装方式:npm install webpack-cli -D 2、使用webpack -v来查看有没有安装成功 3、如果使用 webpack 路径 路径 在终端原创 2020-07-18 14:18:49 · 141 阅读 · 0 评论