webpack
天下1281
这个作者很懒,什么都没留下…
展开
-
webpck4.x autoprofixer失效的问题
安装 postcss-loadernpm install postcss-loader -D配置 webpack.config.jsmodule: { rules: [{ test: /\.css/i, use: [ 'style-loader', 'css-loade...原创 2020-03-01 13:11:15 · 607 阅读 · 0 评论 -
学习webpack4.x(lesson2)
各种模块CommonJsCMDAMDCommonJs 引入文件var Header = require('./header.js');var SliderBar = require('./sliderbar.js');var Content = require('./content.js');导出function Content() { var root = doc...原创 2020-02-19 23:01:27 · 136 阅读 · 0 评论 -
学习webpack4.x的总结(lesson1)
面向过程的思想面向对象的思想webpack思想初始化webpacknpm init初始化项目后打开文件会看到 package.json文件{ "name": "lesson1", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \...原创 2020-02-18 22:23:33 · 168 阅读 · 0 评论 -
webpack概念
概念webpack是一个现代JavaScript应用程序的静态模块打包器(moudle bundler)。当webpack处理应用程序时,它会递归地构建一个依赖关系图(dependency grpha),其中包含应用程序需要的每个模块,然后将所有这些模块打包成一个或者多个bundle。入口出口loader插件模式入口(entry)module.exports = { entr...原创 2020-02-02 12:20:23 · 147 阅读 · 1 评论 -
webpack4目录
概念入口起点输出模式loader插件配置模块模块解析依赖图manifest构建目标模块热替换原创 2020-02-01 22:28:07 · 193 阅读 · 0 评论 -
webpack实战(二)-loader
想必大家都要所了解,ES6某些语法在浏览器中还不能识别,这时我们肯定会想到转化为ES5,如何转换呢?webpack就有这样的功能。如何实现的呢?通过babel-loader。接下来我们看看loader。用法可以在webpack官网或者npm官网中搜索babel-loader 首先在命令行中安装babel-loadernpm install --save-dev babel-loader babel原创 2017-06-29 14:49:25 · 248 阅读 · 0 评论 -
webpack实战(一)
首先,新建一个空的文件,比如item 进入cmd命令行,安装webpacknpm install webpack --save-dev然后初始化npm init初始化的过程中需要填写一些信息,如果你不想填写的话,那么一直enter,直到结束。 初始化完之后,我们发现item文件中多了一个文件package.json{ "name": "webpack_demo1", "version":原创 2017-06-29 11:17:53 · 380 阅读 · 0 评论 -
webpack入门学习1
webpack是什么以及用途 webpack是一个前端打包工具,它可以把多个互相依赖的文件打包成一类文件。它有glup和grunt所有基本功能。 - 相比glup和grunt有以下优点: - 支持CommonJs和AMD模块 - 支持很多模块加载器的调用,可以使模块加载器灵活定制,比如babel-loader加载器,该加载器能使我们使用ES6的语法来编写代码。 - 可以通过配置打原创 2017-05-10 12:43:53 · 460 阅读 · 0 评论 -
webpack-使用babel-loader转化ES6代码
整个文件目录: 在webpack.config.js中需要配置以下代码:module: { loaders: [ { test: /\.js$/, loader: 'babel-loader', option: { 'presets': [latest],原创 2017-05-09 13:24:40 · 20734 阅读 · 1 评论 -
webpack配置
声明:自己学习的笔记,可能说的过于简单,没看懂的可以绕道其行。 文件目录: 首先安装nodejs,webpack是基于nodejs搭建的 其次,新建一个文件夹,比如为item 用window+R进入命令行,然后 cd desktop cd item 进入item文件夹 1.初始化产生一个package.json npm init 2.安装webpack npm instal原创 2017-05-07 21:51:43 · 220 阅读 · 0 评论 -
webpack-dev-server的使用
webpack-dev-server是一个独立的NPM包 可以通过$ npm install webpack-dev-server来安装它 基本目录 webpack-dev-server默认会以当前目录为基本目录,除非你制定它 webpack-dev-server生成的包并没有放在你的真实目录中,而是放在了内存中 我们在基本目录下新建一个index.html文件,然后在浏览器中输入http原创 2017-05-14 18:44:44 · 1064 阅读 · 0 评论 -
webpack入门学习4-browser(浏览器自动运行)
目录和入口、出口、loader配置,之前已经学习过了 现在我们学习一下,如果在webpack.config.js配置使得浏览器自动运行。 要让浏览器自动运行起来,要用open-browser-webpack-plugin这个插件。 然后在webpack.config.js进行配置,代码如下var webpack = require("webpack");var OpenBrowserPlug原创 2017-05-14 14:01:35 · 3651 阅读 · 0 评论 -
webpack入门学习3-loader的使用
babel-loader的用途是把ES6代码转化为ES5代码 我们还是从零开始,首先看整个文件的目录 介绍一下各个目录的作用 dist:文件打包输出的路径 src:文件的入口 package.json: 初始化的文件 webpack.config.js: 配置文件 app.js: 写ES6的js代码 以上是对这个目录介绍 下面开始从头搭建webpack 首先建一个文件夹,名字原创 2017-05-10 22:43:25 · 336 阅读 · 0 评论 -
webpack入门学习2
这篇文章主要是实现多个层级入口和出口,功能和webpack入门学习1一样,具体看目录便知 webpack.config.js稍微有改动module.exports = { entry: './src/app.js', output: { path: __dirname + '/dist', filename: 'js/bundle.js'原创 2017-05-10 17:59:11 · 422 阅读 · 0 评论