webpack
Zyl_CN
这个作者很懒,什么都没留下…
展开
-
webpack-dev-server的指令与配置项
1、修改项目中的package.json来实现自动打开网页,修改端口等操作"dev" : "webnpack-dev-server --open" //npm run dev后自动打开网页"dev" : "webnpack-dev-server --open --port 3000" //npm run dev后自动打开网页并且端口为3000"dev": "webpack-dev-s...原创 2019-03-29 14:36:27 · 528 阅读 · 0 评论 -
webpack的配置项--(打包)
修改打包指令和路径:在webpack3中 是使用webpack .\src\main.js .\dist\bundle.js但是在webpack4中分离出了webpack-cli (所以要先下载webpack-cli)来进行以后的操作;npm i webpack-cli -g (全局下载)webpack .\src\main.js -o .\dist\bundls.js...原创 2019-03-29 09:58:50 · 153 阅读 · 0 评论 -
webpack初识
使用 npm i webpack -g //进行全局安装(本地的话使用后缀 -d)安装之后再项目中使用 npm init -y//生成package.json文件如果要在项目中装插件什么的 可以使用npm i jquery -s //(-s是项目中要使用的,-d是项目实际运行时不需要的,如gulp)...原创 2019-03-29 09:40:01 · 126 阅读 · 0 评论 -
npm装包时-S和-D的区别。带例子
npm install name -save 简写(npm install name -S)自动把模块和版本号添加到dependencies。npm install name -save-dve 简写(npm install name -D)自动把模块和版本号添加到devdependencies。-D后,安装包会在package中的 devDependencies对象中。简称dev...原创 2019-03-28 14:01:46 · 165 阅读 · 0 评论 -
webpack的js转化工具babel配置
在js中写一些高级的es6的语法,进行打包处理会报错,因为会不识别,所以需要安装转化工具-babel//安装babel的转化工具,这里的babel-loader要安装版本7,高版本8,则需要更改其他的安装项npm i babel-core babel-loader@7 babel-plugin-transform-runtime -d//安装语法字典npm i babel-preset...原创 2019-04-02 11:28:43 · 277 阅读 · 0 评论 -
webpack打包处理字体文件
//如果在node_modules中找包的话,可以直接这样写import 'bootstrap/dist/css/bootstrap.css'然后在webpack.config.js中进行配置{test: /\.(ttf|eot|svg|woff|woff2)$/, use: 'url-loader'}...原创 2019-04-01 17:31:39 · 2936 阅读 · 0 评论 -
webpack打包处理img
一般情况下,webpack无法处理css中的url地址(背景图片、字体等),所以需要使用插件来进行处理npm i url-loader -dnpm i file-loader -d //基于url-loader的依赖然后在webpack.config.js进行配置修改 {test: /\.(jpg|png|gif|bmp|jpeg)$/, use: 'url-loader?...原创 2019-04-01 11:31:38 · 790 阅读 · 0 评论 -
webpack打包处理less/scss文件
less配置:npm i less -dnpm i less-loader -dsass/scs配置:npm i node-sass -dnpm i sass-loader -d然后修改webpack.config.js的配置文件:{test: /\.scss$/, use: ['style-loader','css-loader','sass-loader']}...原创 2019-03-29 18:45:55 · 1108 阅读 · 0 评论 -
webpack打包css文件(loader)
因为webpack默认只能打包处理js类型的文件,如果需要处理非js类的文件,我们需要手动安装一些合适的第三方 loader 加载器1.下载所需要的依赖npm i style-loader -d //先安装两个依赖npm i css-loader -d2.修改webpack.config.js的配置文件{test: /\.css$/, use: ['style-lo...原创 2019-03-29 17:49:55 · 238 阅读 · 0 评论 -
html-webpack-plugin插件的使用和配置
特点:1.自动在内存中根据所配置的指定页面生成一个内存的页面;2.自动把打包好的js文件追加到页面当中。npm i html-webpack-plugin -d //在项目中来进行安装然后在在webpack.config.js中进行配置new htmlWebpackPlugin({ template: path.join(__dirname,'./src/...原创 2019-03-29 15:57:00 · 499 阅读 · 0 评论 -
webpack修改代码后自动打包(webpack-dev-server)
需要安装 webpack-dev-servernpm i webpack-dev-server -d //安装到本地依赖(只需要装到本地项目中,不需要-g)因为webpack-dev-server是依赖于本地的webpack和webpack-cli的,所以,如果本地中没有安装。则需要先安装,才能使用npm i webpack -dnpm i webpack-cli -d如果不...原创 2019-03-29 12:07:35 · 1117 阅读 · 0 评论