默认根目录 当前项目 修改目录 devServer devServer:{ open:true, //自动打开浏览器 port:3000, // 端口 contentBase:"dist", // 配置服务的根目录 hotOnly:true // 重新加载但是不刷新页面(但是我没成功...) } loader 解析过程中所依赖的包 css 解析的包 style-loader css-loader 我们的写法尽量采用这种,方便传参 module.exports={ rules: [ {…

这一次我们谈谈模块问题. 通常我们希望这个项目可以分为多个独立的模块,比如,上一次提高的 hello 函数,如果我们定义为一个模块,其它模块引用之后,直接调用就好了.在前端怎么使用模块呢?这可说来话长了. 如果我们把 hello 函数定义在文件 hello.js 中,内容如下: function hello(){ alert("Hello, Webpack!"); } 然后把主入口函数 index.js 的内容写成下面的内容,你应该会得到一个错误信息. require("./…

原文链接:如何正确彻底删除webpack 全局或是局部? 就需要卸载cli 配置webpack ,提示需要安装 webpack-cli,选择yes 后安装webpack-cli , 可是问题不断,所以找了参考文章,卸载干净后根据文章,局部安装webpack 及 webpack-cli. 删除全局webpack-cli webpack4.x开始官方文档是说要安装cli所以如果的在用4.+就需要卸载cli npm uninstall -g webpack-cli # 注释给我这种小白提供参考 # 卸…

webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler). 当 webpack 处理应用程序时,它会递归地构建一个依赖关系图(dependency graph),其中包含应用程序需要的每个模块,然后将所有这些模块打包成一个或多个 bundle. 基本安装 局部安装,官方也是推荐安装到项目目录下 mkdir webpack-demo-1 cd webpack-demo-1 npm init -y //生成package.json,并且一路同意,如果…

下载nodejs的压缩包 网址:https://nodejs.org/en/ 下载以tar.xz结尾的包例如:node-v8.9.4-linux-x64.tar.xz 上传包到制定的目录 可以用lrzsz 解压:xz -d node-v8.9.4-linux-x64.tar.xz 然后在 拆包: tar –xvf node-v8.9.4-linux-x64.tar 配置环境变量在/etc/profile Vim /etc/profilr  最后加入node的变量 export NODE=/roo…

昨日内容回顾 1. 页面的布局 Vue中使用Bootstrap搭页面 1. 安装 1. npm install bootstrap@3.3.7 -S 2. 使用 1. import 'bootstrap/dist/css/bootstrap.min.css' 2. 组件的使用 1. 组件的定义 1. 新建一个xx.vue 2. 在里面定义三个区域(template.script.style) 3. export default { name: "Note", // 告诉别人怎么引用我…

下载nodejs的压缩包 网址:https://nodejs.org/en/ 下载以tar.xz结尾的包例如:node-v8.9.4-linux-x64.tar.xz 上传包到制定的目录 可以用lrzsz 解压:xz -d node-v8.9.4-linux-x64.tar.xz 然后在 拆包: tar –xvf node-v8.9.4-linux-x64.tar 配置环境变量在/etc/profile Vim /etc/profilr  最后加入node的变量 export NODE=/roo…

使用Sinopia搭建私有npm仓库 在用npm装包的时候,每次都要下载一大堆,慢且不说,npm还老被墙,所以就想到在公司内部搭建npm仓库镜像.大概看了几个,觉得Sinopia最简单也好用,所以就使用Sinopia搭建仓库吧. 安装 sudo npm install -g sinopia 配置与运行 安装完成后,暂时不知道配置文件在哪里,可以先运行一下 sinopia,比如: $ sinopia warn --- config file - /home/<user>/.config/sino…

第二单元(webpack的配置-学习webpack的常用配置) #课程目标 掌握webpack的常用配置 掌握如何根据实际的需求修改webpack的对应配置 了解webpack-dev-server的意义和使用 掌握webpack-dev-server的用法 #知识点 webpack的配置项 entry 入口 配置字符串-单个文件 配置数组-会把数组中的文件合并成一份文件,作为入口 配置对象-设置多个入口文件 mode 告诉webpack相应模式的内置优化 可从cli中传递 webapck --…

这一篇来讲解一下如何设置webpack的配置文件webpack.config.js 我们新建一个webpack-demo的项目文件夹,然后安装webpack 执行如下命令 在项目文件夹下,建一个dist文件夹来放打包后的文件,以及一个src文件夹来放我们的代码文件 再建立一个index.html文件,以及一个webpack.config文件. 文件目录结构如下: 在src/js目录下新建一个main.js文件. 然后设置webpack.config.js 基本配置:entry表示打包的入口文件.…