webpack入门     大多数项目会需要很复杂的设置,这就是为什么webpack要支持配置文件.这比在终端中输入大量命令要高效的多,所以让我们常见一个取代CLI选项方式的配置文件 新建 webpack.config.js const path = require('path'); module.exports = { entry: './src/index.js',//设置入口文件 output: { filename: 'bundle.js',//生成的输出文件名称 path: path.…

接着跟我一起学习webpack(一)中的项目来,我们接下来使用配置文件 使用npx webpack -h 我们可以查看webpack的配置参数 从我们在package.json中添加的命令来看,当项目需要越来越多的配置的时候,就要往里面添加更多的参数,那么到后期维护起来就会想当困难 为了解决这个问题,我们主要是将这些参数以对象的形式,专门放在配置文件里面 在webpack每次打包的时候,读取该配置文件即可 新建webpack.config.js文件,添加如下代码 module.exports =…

const path = require('path'); // 以下文件需要npm i 文件名 --save-dev const uglify = require('uglifyjs-webpack-plugin'); const htmlPlugin= require('html-webpack-plugin'); const extractTextPlugin = require("extract-text-webpack-plugin"); //文件分离插件 const glo…

1.路径 __dirname是一个全局变量,在项目html和js中没有单独定义,直接写就可以得到项目的根目录的路径 module.exports={ // __dirname是nodejs里的一个全局变量,它指向的是我们项目的根目录 entry:__dirname+'/src/script/main.js',//入口文件 output:{ path:__dirname+'/dist/js',//打包后输出目录 filename:'bundle.js'//打包后输出的文件 } } 2.不用默认的w…

entry(入口文件) 可以传字符串,数组,对象三种格式(字符串和数组默认生成main.js,均生成一个文件,对象有几个入口文件,生成几个文件).默认值为./src/index.js.entry可以传相对路径,也可以为绝对路径. //字符串格式如下 //数组格式如下: 用途: 在你想要多个依赖文件一起注入,并且将它们的依赖导向(graph)到一个“chunk”时,传入数组的方式就很有用 //对象格式如下 用途: 分离 应用程序(app) 和 第三方库(vendor) 入口 多页面应用程序 out…

在webpack.config.js中entry是唯一入口文件 entry也可以是一个数组 如果是一个数组,会将数组里面的文件一起打包到bundle.js entry也可以是一个对象. 如果output里filename有三个值: .[name]是文件名字是entry的键值. .[hash]是md5加密的值. .[chunkhash]这里是作为版本号使用. 每次修改文件,运行之后,都会生成不一样的hash 于chunkhash值,方便上线时静态资源的版本管理. 文件名如果每次运行都是变化的,文件…

webpack.config.babel.js,这样命名是想让webpack在编译的时候自动识别es6的语法,现在貌似不需要这样命名了,之前用webpack1.x的时候貌似是需要的 let path = require('path'); let webpack = require('webpack'); /* html-webpack-plugin插件,webpack中生成HTML的插件, 具体可以去这里查看https://www.npmjs.com/package/html-webpack-p…

如果项目里没有webpack.config.js这个文件,webpack会使用它本身内置在源码里的配置项. webpack.config.js这个配置名称可以通过指令修改 npx webpack --config xxx.js 或者 npm webpack --config xxx.js…

一.webpack基础 1.在项目中生成package.json:在项目根目录中输入npm init,根据提示输入相应信息.(也可以不生成package.json文件,但是package.json是很有用的,所有建议生成) 2.安装webpaack a.在全局中安装webpack:npm install webpack -g b.将webpack安装到项目并将webpack写入package.json的devDependencies中:进入项目根目录,然后在命令行中输入npm install w…

在react中安装create-react-app脚手架新建项目,但是新建的项目中没有配置文件. webpack的配置文件webpack.base.conf.js隐藏在了node_modules文件夹下的react-scripts下 可以通过以下命令将webpack配置文件暴露出来 npm run eject 或 yarn eject 这时候打开根目录会发现多了config和scripts,就可以修改自己所需要的了…