webpack打包工具:

module.exports:输出
require:引入

require('!style-loader!css-loader!./***.css');静态样式引入

npm install css-loader style-loader:终端下载css样式静态模板

npm install jquery --save-dev:终端下载jqurey引入并使用

服务端环境安装

.通过安装webpack-dev-server模块,可以将项目打包到服务端,并可以指定端口,同时,还可以配置启动命令

命令为:npm install webpack-dev-server --save-dev
使用为:
"start":"webpack-dev-server --entey ./src/js/index.js --output-filename ./dist/main.js",
在终端使用为 npm start就可以打开服务器并且使用
启动后再package.json后中的build中添加“--watch”并在终端后使用npm run build就可以
进行时时更新调用

修改端口在webpack.config.js中添加:
devServer:{
port:8081
}
并在终端从新启动npm start

webpack使用打包的一些心得的更多相关文章

  1. webpack独立打包与缓存处理

    关于 微信公众号:前端呼啦圈(Love-FED) 我的博客:劳卜的博客 知乎专栏:前端呼啦圈 前言 先前写了一篇webpack入门的文章<webpack入门必知必会>,简单介绍了webpa ...

  2. express整合webpack的打包文件dist

    对于我来说,第一次接触前后端整合问题的小白,刚开始是一脸懵逼,这个问题整整坑了我一个晚上加一个早上,现在写出来总结: 前端开发:vue-cli+webpack: 后台开发:nodejs框架expres ...

  3. webpack 基本打包方法

    webpack的打包基本配置文件webpack.config.js 可以在webpack.config.js里面写好配置:比如前章节所总结的四大核心 |-- add.js // 定义一个普通加法函数 ...

  4. webpack 单独打包指定JS文件(CopyWebpackPlugin)

    背景: 不确定打出的前端包所访问的后端IP,需要对项目中IP配置文件单独拿出来,方便运维部署的时候对IP做修改.因此,需要用webpack单独打包指定文件.npm install --save-dev ...

  5. webpack项目打包配置

    webpack.config.js 文件中,其中“plugins”最为重要 var path = require("path"); const webpack = require( ...

  6. webpack 安装,打包使用

      Webpack 本身只能处理 JavaScript 模块,如果要处理其他类型的文件,就需要使用 loader 进行转换. 全局安装webpack 打开文件夹amd输入指令  npm i webpa ...

  7. webpack快速入门——实战技巧:watch的正确使用方法,webpack自动打包

    随着项目大了,后端与前端联调,我们不需要每一次都去打包,这样特别麻烦,我们希望的场景是,每次按保存键,webpack自动为我们打包,这个工具就是watch! 因为watch是webpack自带的插件, ...

  8. [Vuejs] webpack+vue-cli打包如何引用相对路径

    默认情况下通过webpack+vuec-li打包的css.js等资源,路径都是绝对的,即static在根目录下,假如部署到带有文件夹目录的项目中,资源路径就会出错,如何解决. 1.修改资源引用相对路径 ...

  9. Vue.js中用webpack合并打包多个组件并实现按需加载

    对于现在前端插件的频繁更新,所以多多少少要对组件化有点了解,下面这篇文章主要给大家介绍了在Vue.js中用webpack合并打包多个组件并实现按需加载的相关资料,需要的朋友可以参考下.   前言 随着 ...

随机推荐

  1. 效果CSS实现三角

      <view class="hd"></view>.hd {   content: "";   height: 16rpx;   wi ...

  2. 对于大型公司项目平台选择j2ee的几层认识

    我是一个从野路子上一路走来的程序员,现在主要用.net做方案.选.net不选jave并没有什么特别的原因,只不过是因为我自己从c,java学起,后来被vs这个工具所吸引, 很熟悉这个平台罢了,从业15 ...

  3. Windows Azure系列公开课 - 第二课:为什么选择Windows Azure(上)

    Windows Azure是微软的云平台,可以提供广泛服务.您可以通过它搭建.部署并管理解决方案,用于实现您可以想象的几乎任何目标.换言之,WindowsAzure是拥有无限可能的世界.无论您是需要运 ...

  4. jQuery 插件封装的方法

    方式1.$.fn.xxx ==>针对元素添加方法: ;(function ($) { $.fn.m​​yPlugin = function () { //你自己的插件代码 }; })(jQuer ...

  5. 如何去掉HTML代码来获取纯文本?

    public string TextNoHTML(string Htmlstring) { //删除脚本 Htmlstring = Regex.Replace(Htmlstring, @"& ...

  6. Python学习---django之ORM的增删改查180125

    模型常用的字段类型参数 <1> CharField        #字符串字段, 用于较短的字符串.        #CharField 要求必须有一个参数 maxlength, 用于从数 ...

  7. ISA 连接非443端口的https站点提示错误

    ISA 连接非443端口的https站点提示错误:12204 The specified Secure Sockets Layer (SSL) port is not allowed. ISA Ser ...

  8. August 19th 2017 Week 33rd Saturday

    Live for today and stop stressing out about tomorrow. 为今天而活,不必为明天过分担心. Stop bewailing the past misfo ...

  9. linux 下 eclipse 开发环境的搭建

    在windows平台下开发习惯了各种ide,不得不承认ide给我们开发带来的便捷.于是希望在linux平台下也希望找到一个合适的ide.这就想起来了eclipse具有跨平台性. 那么就开始搭建环境吧. ...

  10. web自动化_浏览器驱动chromedriver安装方法(适用RF框架/Selenium/Appium)

    在进行UI自动化时,打开浏览器是第一步,这就必须要安装浏览器的驱动,chrome浏览器需要安装chromedriver,下载地址:http://chromedriver.storage.googlea ...