Webpack | 易学教程

json-loader in webpack.config.js not working

阅读更多关于 json-loader in webpack.config.js not working

问题 I'm trying to follow a react tutorial, My webpack.config.js file is as follows: var webpack = require("webpack"); var pth = require("path"); module.exports = { entry: "./src/index.js", output: { path: __dirname + "/dist", filename: "bundle.js" }, devServer: { inline: true, contentBase: './dist', port: 3000 }, module: { rules: [ { test: /\.js$/, exclude: /(node_modules)/, use: 'babel-loader' }, { test: /\.json$/, exclude: /(node_modules)/, use: 'json-loader' } ] } } While my Code files are as

前端通往架构师之路

阅读更多关于前端通往架构师之路

作者：吕小鸣链接：http://www.imooc.com/article/291995 前端架构师, 听起来就是个很高大上的职位，在大多数程序员的眼中，架构师一般从事后端开发，Java或者C++出身，它们往往拥有这十八般武艺，可以解决业务中出现的各种问题。好像架构师就从来没有和前端有过关系，那么真的是这样么，通读此文，便可豁然开朗。前端的意义首先，我们先来谈谈本职工作，前端的意义。前端源自用户界面，是最先和用户接触的地方，也是衡量一个项目产品好坏的第一道关口。到底什么是前端从最早的DOS系统说起，那时是没有前端的概念的，大多数的软件界面显示的都是冷冰冰的黑底白字的控制台命令，于是，慢慢的不仅是用户，就连广大的程序员也不满足现状，开发出一套图形化的用户界面，让一些功能更加便于操作。那时前端叫做GUI(图形用户界面)。还没有区分出多端的概念，大多数是基于操作系统开发出的原生界面。上图来自DOS系统经典软件DOS Navigator 随着互联网的发展，第一代浏览器Netscape(网景浏览器)的诞生以及后续的IE系列浏览器的到来，”网上冲浪“这个词逐渐进入到大多数的用户生活中。直到现在大行其道浏览器Chrome，以及国内各种百花齐放的浏览器。主要给浏览器服务，实现各种特效的JavaScript语言，迎来了第一波春天。上图来自网景浏览器直到现在，前端逐渐拆分成：

Postcss - color function plugin - “Unable to parse color from string”

阅读更多关于 Postcss - color function plugin - “Unable to parse color from string”

问题 Using the following postcss plugins: postcss-cssnext postcss-nested postcss-color-function I constantly hit the following error, when using the following color function. Unable to parse color from string "l(-20%)" styles.css @import 'variables.css'; // ^-- contains: --blue: #3892e0; & a { color: color(var(--blue), l(-20%)); &:hover { color: color(var(--blue), l(0%)); } } Webpack 2 snippet { loader: 'postcss-loader', options: { plugins: [ cssImport({ path: './src' }), cssnext({ browsers: [

How does Dynamic Import in webpack works when used with an expression?

阅读更多关于 How does Dynamic Import in webpack works when used with an expression?

问题 How does the bundling happens when you use something like this: const module = import(`folder1/${someExpression}`); I mean, I do understand when you pass a plain string to it, but how does webpack understands all the possible outcomes? Is this a good pattern? Does it bundle all the files from that folder? If so, it bundles them all together and does it recursively? 回答1: So, I bumped into this question that gave me an idea on how it works and what to search for. I am posting here so it can

Vue 3 external component/plugin loading in runtime

阅读更多关于 Vue 3 external component/plugin loading in runtime

问题 I am designing an architecture for the Vue 3 app with distributed module-based ownership. Module system will be represented with plugins (seems like the most appropriate solution allowing vuex module and vue-router dynamic injects). Each such module/plugin will be developed by dedicated team working within isolated repos. We cannot use npm package-per-plugin approach as deployment process should be isolated as well, and with npm approach core app team will have to rebuild app each time npm

Is it possible to use both “require” and “import” together with Webpack?

阅读更多关于 Is it possible to use both “require” and “import” together with Webpack?

问题 We had to update some dependencies to switch to Webpack 4 and are getting a warning in webpack and an error in the browser when trying to mix import and require within the same project. We have a very large project (300+ files) with some files using var Pkg = require('./fileName'); and module.exports = MyComponent while others use import Pkg from './fileName' and export default MyComponent and would prefer to not have to go through each one using require/module.exports and update them.

Is it possible to use both “require” and “import” together with Webpack?

阅读更多关于 Is it possible to use both “require” and “import” together with Webpack?

Typescript / Webpack check if running via Production config

阅读更多关于 Typescript / Webpack check if running via Production config

问题 I am using webpack, reactjs, typescript . In my .tsx code, I have a requirement where I need to route to URL depending upon my environment i.e. Production or Development. So, how can I check for the environment and load the correct URL dynamically ? 回答1: You can add a plugin to define an environment variable that can be accessed within the code, like this: new webpack.DefinePlugin({ 'process.env.NODE_ENV': JSON.stringify('production') }) And then inside your code you just have to check for

marker icon isn't showing in Leaflet

阅读更多关于 marker icon isn't showing in Leaflet

问题 I 've put together a very simple React / Leaflet demo but the marker icon is not showing at all. Full running code is here. Here's what I have in my componentDidMount method: componentDidMount() { this.map = L.map("map-id", { center: [37.98, 23.72], zoom: 12, zoomControl: true }); const mapboxAccessToken = "pk.eyJ1IjoibXBlcmRpa2VhcyIsImEiOiJjazZpMjZjMW4wOXJzM2ttc2hrcTJrNG9nIn0.naHhlYnc4czWUjX0-icY7Q"; L.tileLayer( "https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=

npm安装教程

阅读更多关于 npm安装教程

一、使用之前，我们先来掌握3个东西是用来干什么的。 npm: Nodejs下的包管理器。 webpack: 它主要的用途是通过CommonJS的语法把所有浏览器端需要发布的静态资源做相应的准备，比如资源的合并和打包。 vue-cli: 用户生成Vue工程模板。（帮你快速开始一个vue的项目，也就是给你一套vue的结构，包含基础的依赖库，只需要 npm install就可以安装）开始：如图，下载8.9.3 LTS （推荐给绝大部分用户使用）双击安装可以使用默认路径，本例子中自行修改为d:\nodejs 一路点Next 点Finish完成打开CMD，检查是否正常再看看另外2个目录，npm的本地仓库跑在系统盘c盘的用户目录了(没见到npm-cache是因为没有用过，一使用缓存目录就生成了)，我们试图把这2个目录移动回到D:\nodejs 先如下图建立2个目录然后运行以下2条命令 npm config set prefix "D:\nodejs\node_global" npm config set cache "D:\nodejs\node_cache" 如上图，我们再来关注一下npm的本地仓库，输入命令npm list -global 输入命令npm config set registry=http://registry.npm.taobao.org 配置镜像站