2019年03月_Zyl_CN

原创 webpack打包处理less/scss文件

less配置: npm i less -d npm i less-loader -d sass/scs配置: npm i node-sass -d npm i sass-loader -d 然后修改webpack.config.js的配置文件: {test: /\.scss$/, use: ['style-loader','css-loader','sass-loader']}...

2019-03-29 18:45:55 1108

原创 webpack打包css文件(loader)

因为webpack默认只能打包处理js类型的文件，如果需要处理非js类的文件，我们需要手动安装一些合适的第三方 loader 加载器 1.下载所需要的依赖 npm i style-loader -d //先安装两个依赖 npm i css-loader -d 2.修改webpack.config.js的配置文件 {test: /\.css$/, use: ['style-lo...

2019-03-29 17:49:55 238

原创 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 498

原创 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

原创 webpack修改代码后自动打包(webpack-dev-server)

需要安装 webpack-dev-server npm i webpack-dev-server -d //安装到本地依赖(只需要装到本地项目中，不需要-g) 因为webpack-dev-server是依赖于本地的webpack和webpack-cli的，所以，如果本地中没有安装。则需要先安装，才能使用 npm i webpack -d npm i webpack-cli -d 如果不...

2019-03-29 12:07:35 1116

原创 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

原创 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

原创 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

Zyl_CN的博客