美文网首页
【构建工具1】配置webpack

【构建工具1】配置webpack

作者: 八宝君 | 来源:发表于2018-05-16 14:02 被阅读0次

项目准备

项目的准备工作
mkdir 创建一个新目录(目录名字不能为常见的包名,如webpack这类)
cd xxx  切换到xxx目录
ls/ll    查看当前目录下的所有文件

然后第二步初始化:
npm init     目的是通过npm安装很多安装包,自动化创建这个文件package.json
第三步创建业务目录:
比如说放在app里,分js/css/views  然后对应的目录下放对应的文件
初始化的步骤图

创建配置文件

创建配置文件
###基础配置
entry    入口,webpack要构建哪个文件
module   配置各种loader,比如css-loader
plugins  插件,不是必选项,但是离不开
output   输出

###进阶配置
resolve    教webpack怎么去查询文件 
devtool    sourceMap有用到
devServer  开启服务

entry module
output
pathnode提供的path路径的对象。
resolve表示相对路径,
这句话的意思是,在你的当前路径下,创建一个dist目录,然后构成的文件输出在dist目录下。 头部配置
devServer

contentBase 是如果需要提供一个静态文件时,静态文件在哪输出。
compress:整个文件开启gzip压缩
port:在哪个端口开启


让devServer跑起来

在package.json里添加一段script

-- open是自动打开

出现这种错误的时候
检查Vue的问题:


报错
vue官网的解释
添加这一段即可解决

相关文章

  • 【构建工具1】配置webpack

    项目准备 创建配置文件 contentBase 是如果需要提供一个静态文件时,静态文件在哪输出。compress:...

  • webpack简单使用

    一、webpack简介 1.webpack是什么 webpack项目打包工具,项目构建工具 2.webpack有什...

  • vuessr 服务器端渲染

    安装 构建配置 服务端 webpack配置 server 客户端 webpack配置 源码结构

  • 08、React系列之--使用webpack管理

    1、什么是webpack webpack是一个打包工具,是一个模块加载工具,是一个构建工具,在 webpack 当...

  • 第1讲 使用vue-cli3.0创建项目

    vue-cli 3.0是基于webpack 4.0之上构建的vue脚手架工具,得益于webpack4.0的零配置特...

  • webpack的使用

    认识webpack 什么是webpack ​ webpack是一个前端的模块化打包(构建)的工具 功能:​- 1...

  • webpack简介

    目录 webpack是什么,有哪些同类工具webpack项目打包工具,项目构建工具,有什么作用构建单页应用(dis...

  • webpack4 构建vue多页工程

    webpack4 构建vue多页工程 多页应用开发环境配置 构建开发环境的配置,需要使用到webpack-dev-...

  • 关于webpack自己的一些看法

    webpack是一个js模块化构建工具,通过使用loader、插件,webpack称为了一个前端构建工具。工具的作...

  • Webpack

    1.五个概念 入口(entry):指示 webpack 使用哪个模块来作为构建其内部依赖,在 webpack中配置...

网友评论

      本文标题:【构建工具1】配置webpack

      本文链接:https://www.haomeiwen.com/subject/xqrydftx.html