free_and_strong的博客

Weback命令行安装npm install webpack -g     //全局安装npm init       //初始化npm install –save-dev webpack     //项目目录的安装 –save-dev是在开发中使用，-save要保存到pa...

watch的正确使用方法：在终端中输入 webpack –watch在src/index.html里面添加内容： <h1>Wuyou shopping will be your best choice!!!!</h1>打开dist/index.html同样添加上了该代码如果没有该效果在webpack.config.js的==devServer==里面配...

以分离jquery库和vue为例：安装jquery npm install jquery –save 在entry.js里面使用jquery代码： $(‘#title’).html(‘你还好吗？’); 在webpack.config.js里面引入jquery插件new webpack.ProvidePlugin({ $:'jquery'}),在最上面...

集中拷贝静态资源管理器：在src目录下新建一个public文件夹，在里面放入些图片或者文档安装插件 copy-webpack-plugin npm install –save-dev copy-webpack-plugin在webpack.config.js里面引入插件 const copyWebpackPlugin= require(“copy-webpack-plu...

json配置文件使用：在src根目录下新建一个config.json文件（和webpack.config.js同级）{ "name":"wuyou", "skill":"web前端", "habit":"badminton"}在index.html中插入一层div,放json文件 <div id="json"&

图片写入css在src目录下新建一个images文件夹并且放入一张图片在index.html中插入一个区块 例如：<div id="pic"></div>在css目录下的index.css里面为#pic插入背景图片在终端输入webpack打包报错，需要在终端配置 ffile-loader和url-loader 在终端输入： npm install –sav...

css分离：extract-text-webpack-plugin安装该插件： for webpack 1 npm install –save-dev extract-text-webpack-plugin@1.0.1 for webpack 2 npm install –save-dev extract-text-webpack-plugi...

webpack中是不喜欢你使用标签来引入图片的，但是我们作前端的人特别热衷于这种写法，国人也为此开发了一个：html-withimg-loader。他可以很好的处理我们在html 中引入图片的问题项目安装：npm install –save-dev webpack全局安装：npm install -g webpack** webpack不鼓励全局安装webpack,如果在终端中...

打包和分离less安装less的服务 npm install –save-dev less安装less-loader打包使用 npm install –save-dev less-loader配置loader：{ test: /\.less$/, use: [{ loader: "style-loader" // creates s...

前言：package.json是npm中的包管理配置文件，webpack.config.js是webpack默认的配置文件，webpack.plugin.js则是我为了使webpack.config.js看起来更清晰而提取出的一些配置内容，顾名思义是提取出了插件的配置。node_modules是执行npm install后依赖包的安装目录。打包和分离sass在项目目录下安装两个包:...

优雅打包第三方类库：以引入jquery为例：首先安装jquery npm install –save jquery Jquery最终要在生产环境中使用，所以我们这里要使用–save第一种方法：第一步在entry.js里面引入jquery: import $ from ‘jquery’;第二步用jquery设置属性： $(‘#title’).h...

js中的模块化实现在dist目录下新建一个jspang.js文件声明一个jspang方法，用module.exports暴露出去function jspang(){ alert('jspang.com:'+'webpack');}module.exports=jspang;在entry.js里面，并使用import jspang from './jspang.js'...

开发和生产并行设置npm安装若要安装jquery库，有3种安装方法 npm install jquery //安装完成后，你会发现在package.json中并不存在这个包的依赖(不赞成)npm install jquery –save //生产环境依赖的包npm install –save-dev jquery //开发环境依赖的包（上线并不需要这个包的...

建立一个demo进入建立的webpack_demo目录下创建一个dist文件夹（用于生产）和src文件夹（用于开发环境） src文件夹：用来存放我们编写的javascript代码，可以简单的理解为用JavaScript编写的模块。dist文件夹：用来存放供浏览器读取的文件，这个是webpack打包成的文件。编写程序文件： dist文件下手动建立一个index.html文件 /dist...

3.配置文件的入口和出口1、建立一个js 为webpack.config.js文件 ，该文件是Webpack的配置文件 webpack.config.jsmodule.exports={ entry:{}, //入口文件的配置项 output:{}, //出口文件的配置项 module:{}, //模块：例如解读CSS,图片如何转换，压缩 ...

配置服务：热更新热更新的意思是：左边打开浏览器，右边编译器，当编译器中的内容改变，按下ctrl+s，左边的浏览器会跟着编译器的内容发生改变配置devServerdevServer有四个目录结构：const path = require('path') //path是一个常量不能更改 ，path 需要引入var webpack = require('webpack'...

14消除未使用的css简介：       使用PurifyCSS可以大大减少CSS冗余,即去除未使用的css安装PurifyCSS 插件，PurifyCSS-webpack要依赖于purify-css这个包，所以这两个都需要安装 npm i -D purifycss-webpack purify-css在webpac...

fsdsg

打包后代码调试在配置devtool时，webpack给我们提供了四种选项： 1. source-map 独立 map 行 列 2. cheap-module-source-map 独立 行 不包括列 3. eval-source-map eval js 开发阶段 上线 行 列 4. cheap-module-eval-source-map 列注意：如果大型项目可以使用source...

css文件打包Loaders是webpack最重要的功能之一 ，可以通过不同loader ，从而对不同文件格式进行特定处理Loaders是在module模块里面简单的举几个Loaders使用例子：可以把SASS文件的写法转换成CSS，而不在使用其他转换工具。可以把ES6或者ES7的代码，转换成大多浏览器兼容的JS代码。可以把React中的JSX转换成JavaScript代码。...

js代码压缩需要引入插件：在webpack-config.js里面引入uglify例如：const uglify=require(‘uglifyjs-webpack-plugin’);在module里面的plugin里面引入插件： plugins:[ new uglify()]使用webpack进行打包，就会看到js代码已经被压缩了...

html打包根据上篇文章讲的js压缩，npm run server运行后会报错      要弄明白这个问题，我们先要弄清楚什么是开发环境，什么是生产环境。开发环境中是基本不会对js进行压缩的，在开发预览时我们需要明确的报错行数和错误信息，所以完全没有必要压缩JavasScript代码。而生产环境中才

通过postcss-loader给css3加前缀在终端中安装两个包postcss-loader和autoprefixer npm install –save-dev postcss-loader autoprefixer若安装失败，删除node_modules文件夹，npm install重新安装该文件夹后再重新安装上述两个包 2. 建立一个个webpack-config....