1.初始化项目 mkdir react-redux && cd react-redux npm init -y2.安装webpack npm i webpack -Dnpm i -D 是 npm install --save-dev 的简写，是指安装模块并保存到 package.json 的 devDependencies中，主要在开发环境中的依赖包. 如果使用webpack 4+ 版本，还需要安装 CLI。 npm install -D webpack webpack-cli3.新建一下项目结构 react-redux|- package.json + |- /dist + |- index.html|- /src|- index.js index.html <!DOCT...
通过Vue-cli进行webpack打包的坑 Vue-cli为Vue项目搭建的脚手架的确很方便，但打包时容易出现空白页，或者对应的静态资源加载不了。 我是通过将项目/config下的index.js的assetsPublicPath变成./，变成相对路径，进行解决。 cd vue demo npm run dev //运行程序 npm run bulid //webpack打包处理静态资源 你也许会注意到vue-cli与webpack结合的项目中，我们通常会有两个静态资源的路径：src/assets和static/，他们两者的区别是什...
使用webpack构建font-awesome或者bootstrap的时候，最常见的一个问题就是构建字体文件的问题。经常会出现无法找到字体文件的问题。下面就讲一下如何正确构建引入字体文件：1. 首先安装依赖:代码如下:npm install style-loader css-loader file-loader font-awesome-webpack --save-dev 2. 在入口文件中引入font-awesome require(font-awesome-webpack);3. 设置webpack.config.js处理字体文件 这里有两种方式，如果你不想单独生成...
在前端调试的时候，跨域一直都是一个比较麻烦的问题，这个在之前的文章 关于跨域问题的一个解决方法 中其实已经讨论了一些可以使用的方法。 如果要使用 JSONP，第一是需要修改的地方比较多，而且也不太符合前端发展的大趋势，如果使用 CORS 的话并没有 application/json 类型。而且更重要的是这只是在前端调试时候的需求，并不是在上线以后的需求，所以对后端有太多的入侵也不好。 所以就有一个念想突然在大脑中闪过——加入有一个...
在之前的文章中了解了webpack v4的特性，现在将知识用于实践，对之前写的一个react脚手架进行打包性能的优化。 优化类目 样式分离第三方资源分离区分开发环境热更新提取公共代码1. CSS分离 npm install extract-text-webpack-plugin -Dwebpack.config.js 将css、less、sass文件单独从打包文件中分离 + let cssExtract = new ExtractTextWebpackPlugin({ + filename: css.css, + allChunks: true + }); + let sassExtract = new Ext...
概述 本月迎来了 v4 正式版的发布，本文用于学习新特性和总结开发必用plugin & loader，从dev到prd，走你~ Big changes Environment Node.js 4 is no longer supported. Source Code was upgraded to a higher ecmascript version. Usage You have to choose (mode or --mode) between two modes now: production or development 本次新版本中引入了 mode 配置项，开发者可在 none，development（开发 ） 以及 production（产品）三...
问题 vue init webpack myproject构建项目 使用localhost 或者127.0.0.1 均可以正常访问，但是切换到本地ip就不行了 解决方式 在 webpack.dev.conf.js 追加以下代码 const HOST = process.env.HOST || 0.0.0.0; 重新启动 npm run dev重新打开即可以上这篇vue init webpack myproject构建项目 ip不能访问的解决方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
打包压缩js与css 由于webpack本身集成了UglifyJS插件（webpack.optimize.UglifyJsPlugin）来完成对JS与CSS的压缩混淆，无需引用额外的插件, 其命令 webpack -p 即表示调用UglifyJS来压缩代码，还有不少webpack插件如 html-webpack-plugin 也会默认使用UglifyJS。 uglify-js的发行版本只支持ES5，如果你要压缩ES6+代码请使用开发分支。 UglifyJS可用的选项有： parse 解释 compress 压缩 mangle 混淆 beautify 美化...
思路：将自己的项目启动ip与端口固定，当然端口也可以为默认的8080 步骤： 1.查看自己在局域网内的ip 命令行 ipconfig 2.回到自己的开发目录，在根目录找到comfig/index.js 修改 host: 自己的局域网ip 修改 port: 自定义端口-最好不要用80或者其他常用端口 示例：comfig/index.js host:http://192.168.2.153,//一定要加上 http port:3000注意：此处ip一旦固定，本机访问的或localhost将不可访问，必须也使用这个ip，局域网也是一样...
本文介绍了webpack打包node.js后端项目的方法，分享给大家，具体如下：安装依赖代码如下: npm install --save-dev webpack babel-loader babel-preset-es2015 babel-preset-stage-0webpack配置webpack.config.js use strict;const webpack = require(webpack);let externals = _externals();module.exports = {entry: {app: ./app.js,},target: node,output: {path: ./build,filename: [name].js},resolve: {extensions: [, .js]},...
问题：在项目开发时使用字体图标，报错如下：所有的字体图标都不能正常显示了，报错提示不能解码字体。 解决问题：找了很久，最后发现是在webpack配置的时候自己手动添加了下面的代码而引起的错误：在 webpack.base.conf.js文件中删除 { test: /\.(eot|svg|ttf|woff|woff2)(\?\S*)?$/, loader: file-loader }, 总结： 其实采用vue-cli 自动生成的配置文件已经完成了字体图标文件的编译，自己写的和自动生成的产生冲突 以上这篇webp...
webpack项目调试 -sourcemap webpack配置提供了devtool这个选项，如果设置为 ‘#source-map，则可以生成.map文件，在chrome浏览器中调试的时候可以显示源代码。 devtool: #source-mapwebpack独立生成可修改的配置文件 用generate-asset-webpack-plugin这个插件，在webpack.prod.config.js中去生成configServer.json文件， 让其build的时候生成json文件，然后时候get方法异步获取json，替换url即可 具体做法： 先安装generate-asset...
最近用vue-cli+vue-router+webpack建立项目，其中的遇到的三个问题，整理如下： vue-cli+ webpack 建立的项目，cnpm run build 打包项目之后，需要放在http服务器上才可以运行， 例如 ：nginx vue单页面的启动页面是index.html,路由的路径实际是不存在的，所以会出现刷新页面404的问题，需要设置所有找不到的路径直接映射到index.html 1 刷新页面404配置启动文件的index页面的路径root: D:/workPlace/mex-adx-web/mex-adx-web/dist...
使用vue-cli+webpack创建的项目，修改文件名称或者更改文件的位置，运营时会报错，是因为npm项目，在安装依赖（node_nodules）时，会记录当前的文件路径，当修改之后就无法正常启动。 解决方法： 1 删除 node_modules 文件夹（如果修改项目名称，需要在在package.json中修改对应的name） 2 重新安装依赖 cnpm install 3 启动项目 cnpm run dev ok，解决 以上这篇vue-cli+webpack项目 修改项目名称的方法就是小编分享给大家的全部内...
1：安装依赖 npm install sass-loader node-sass --save-dev2：html中 修改style <style lang="sass">/* write sass here */ </style>3: 使用正常sass 语法 //但是会报错 <style lang="sass">$highlight-color: #F90;$highlight-border: 1px solid $highlight-color;.selected {border: $highlight-border}// 解决方案一 记得属相前面一定是两个空格 <style lang="sass">$highlight-color: #F90$highlight-border: 1px solid $high...