去年安装过webpack，很顺利。但是作为一个安装失败体质，今儿安装又变得复杂了，==》最近webpack更新了。。。在确保安装好node & npm后，我们开始安装webpack1. 以admin身份进入cmd2. 可以看到很多warning，感觉为以后留下了隐患，因为是最新版本，其他的依赖包还没有很好的支持，晕倒，为什么受伤的总是我。先试试吧，路加，加油！ 3. 开心了一下，vue-cli 直接可以用webpack， ps: must run in admin cmd 原文：https://www.cnbl...
WebPack使用核心概念参考文档webpack v4.44.1中文文档https://www.webpackjs.com/concepts/webpack v5.0.0-beta.24https://webpack.js.org/concepts/四个核心组成入口 Entry输出 Output加载解释 Loaders插件 Plugins加上- 模式 Mode
- 浏览器兼容性Browser Compatibility
示例目录结构src|- index.js // 入口文件 引入了a.js a.less index.css|- a.js // 示例js文件|- a.less // less文件|- index.css ...
配置webpacknpm i init --y
npm i webpack -D
npm i webpack-cli -D
npm i @types/firefox-webext-browser @types/chrome -D // 浏览器扩展API提示
支持 Typescripttsc --init
npm i typescript ts-loader -D
设置tsconfig.json配置文件{"compilerOptions": {"target": "ES2016","module": "commonjs", // ts-node 不支持 commonjs 以外的任何模块语法"allowJs": true,"outDir": "./dist","rootDir": "./src","strict": true,"...
webpack在不进行任何配置的情况下，他只认识js。为什么要打包？因为一个个小文件，我们合成一个，这样请求就只请求一次。webpack除了打包之外，还具有翻译官的功能？loader把浏览器看不懂的代码翻译成浏览器看的懂的代码。 Plugin？对文件做点别的事情不管是loader 还是 plugin 都是可插拔，意思就是你什么时候想用，你就装进来，不想用，删掉。所以说webpack不仅强大，而且灵活。 为什么要模块化？模块化的好处？ 如上图，传统的...
当我们打算使用Webpack构建工具，React和ES6来开发项目的时候，构建这么一套自动化的项目的流程见下： 第一步：webpack是一个基于node的项目，我们使用命令行对webpack进行全局的安装npm install webpack –g。可以通过webpack –h来查看安装的版本信息。然后我们新建一个文件夹用来存放整个项目文件。为了可以在项目中使用webpack，我们需要将webpack安装到当前的项目依赖中，在新建的文件夹下输入：npm init（安装webpack依赖，...
vue项目实战记录,地址在这 购物车单界面 npm install
npm run dev 跑起来可以看到界面效果 这里简单记录一下webpack的编译流程 入口 package.json "scripts": {"dev": "node build/dev-server.js", //npm run dev ，执行这里"build": "node build/build.js"}, build文件下的dev-server.js文件var config = require(‘../config‘)//引入的一个配置文件，运行时和开发时的一个配置文件
var webpack = require(‘webpack‘)
var op...
在最近做的vue项目中,使用了webpack打包工具,以前在做项目中测试环境和生产环境的接口地址都是一样的,由于现在接口地址不一样,需要在项目打包的时候手动切换不同的地址,有时候忘记切换就要重新打包,来回很是麻烦,今天网上翻看到一个很好的方法可以解决这个问题,也是由于对webpack工具不是很了解,其实这个工具已经提供了解决方案.参考网站:http://blog.csdn.net/gebitan505/article/details/58166055;在config文件夹里面有三个js文件...
学习webpack的loader时，命令行安装的css-loader无法正常运行，并报错：(node:20500) UnhandledPromiseRejectionWarning: TypeError: this.getResolve is not a function原因：应该是webpack版本过低，而直接npm install默认安装的css-loader等版本过高的原因。其他loader也有相关警告：解决方案1. package.json里手动降loader的版本，顺手把其他几个也都改成和老师一样的版本吧。（学习阶段，跑起来为上）2. 删除node_module后重新...
1 安装已安装npm前提下，先全局后在使用的文件夹下安装局部，npm init 初始化package.jsonnpm install webpack --save-dev2 测试 运行后生成b.js运行除了直接webpack命令，还可以修改package.json里面，在scripts里添加 "start":"webpack"，然后npm start就可以了，npm run start一样，跟vue-cli全家桶的npm run dev一样的报错详细，可以用webpack --display-error-details3 配置webpack.config.js更详细参见：http://webp...
整了两天才发现是前段时间创建修改HOSTS文件导致的找到目录C:\Windows\System32\drivers\etc
删除 HOSTS文件注意：删除的不是hosts.ics 删除的是HOSTS原文：https://www.cnblogs.com/ITwj-115/p/14775816.html
在家的闲暇时间来完善自己的前端知识。经过两三天的学习，按照webpack文档学习，vue文档学习，最后实现了两者结合的目标。webpack按照网站上guide的流程依次学习1、使用npm安装webpack2、设置输入文件，比如怎样引入css，images，fonts，data3、设置输出文件，比如可以根据自己的设置来决定输出脚本的名称，生成新的页面，在每次生成新页面之前先把旧的页面进行清理4、开发过程中，使用source maps来显示提示信息，方便开发者定位错...
学了一段时间的webpack,总觉得插件太多，麻烦。在学习过程中得知了vue-cli脚手架工具。为啥我学vue的时候没有听说过这个。。好了，来说一下vue-cli吧。它是一个专门为单页面应用快速搭建繁杂的脚手架，它可以轻松的创建新的应用程序而且可用于自动生成vue和webpack的项目模板。看了webpack四五天之后就去试了一下这个脚手架，很好用的。之前webpack就想偷偷懒了。直接找了一下别人学习webpack的笔记。嘿嘿。虽然脚手架很方便，但是...
npm init -y 初始化项目 //-y 为自动生成package.json，如果需要自行配置，去掉-y即可安装各种依赖项npm install --save vue 安装vue2.0npm install --save-dev webpack webpack-dev-server 安装webpack以及webpack测试服务器 //默认安装最新版2.x版本npm install --save-dev babel-core babel-loader babel-preset-es2015 安装babel，一般的浏览器是不认识es6语法的，babel的作用是将es6的语法编译成浏览器认识的语法npm install...
1 webpack.config.js const webpack = require(‘webpack‘),htmlWebpackPlugin = require(‘html-webpack-plugin‘),path = require(‘path‘);module.exports = {entry: {main: ‘./src/script/main.js‘,a: ‘./src/script/a.js‘},output: {path: path.resolve(__dirname, ‘./dist‘),filename: ‘js/[name]-[chunkhash].js‘,publicPath: ‘http://cdn.com/‘ //path输出的时候的目录 publicPath理解为占位符，需要上线地址 ...
一：基本概念1、字面意思是摇树，一句话：项目中没有使用的代码会在打包时候丢掉。分为css的tree shaking和js的tree shaking。2、使用场景：1）常规优化。2）使用第三方库，但是只使用了部分功能。二：JS tree shaking在webpack4中已经移除了UglifyJsPlugin，只需要配置mode为"production"，即可显式激活 UglifyjsWebpackPlugin 插件。下面说的是webpack3.10.0的实现方法：（1）常规业务的tree shaking1、webpack.config.js配置con...
