9css分离:extract-text-webpack-plugin
2018-08-17 16:57
537 查看
css分离:extract-text-webpack-plugin
- 安装该插件:
for webpack 1
npm install –save-dev extract-text-webpack-plugin@1.0.1
for webpack 2
npm install –save-dev extract-text-webpack-plugin@2.1.2
for webpack 3
npm install –save-dev extract-text-webpack-plugin
for webpack 4
npm i extract-text-webpack-plugin@next -D
- 在webpack-config.js中引入插件
const extractTextPlugin=require(“extract-text-webpack-plugin”); - 配置plugins:这里new一下这个对象,与上面那个配置插件用逗号分隔
new extractTextPlugin(“/css/index,.css”)
这里的/css/index.css是分离后的路径位置。这部配置完成后,包装代码:还要修改原来我们的style-loader和css-loader
- [x] 修改代码如下:
module:{ rules: [ { test: /\.css$/, use: extractTextPlugin.extract({ fallback: "style-loader", use: "css-loader" }) },{ test:/\.(png|jpg|gif)/ , use:[{ loader:'url-loader', options:{ limit:500000 } }] } ] },
使用webpack进行打包
- 注意:虽然把css文件分离出来了,但是css路径不对
用==publishPath==来解决
publicPath:是在webpack.config.js文件的output选项中,主要作用就是处理静态文件路径的- 在处理前需要在webpack.config.js上方声明一个website对象
- 注意:这里的IP和端口是本机的ip或者是你devServer配置的IP和端口 //==publicPath里面的内内容一定要写正确:用ipconfig查看电脑的ip地址,然后冒号后面跟自己设置的端口==
在output选项中引用这个对象的publicPath属性
//出口文件的配置项 output:{ //输出的路径,用了Node语法 path:path.resolve(__dirname,'dist'), //输出的文件名称 filename:'[name].js', publicPath:website.publicPath },
使用webpack进行打包,这时原来的相对路径就会变为绝对路径(绝对路径速度会更快)
gitub官网
webpack4版本以上css分离
var website={ publicPath:"http://192.168.1.108:1717" }
*若出现下列错误,说明ip没写对
> y@1.0.0 server F:\webLearn\webpackLearn > webpack-dev-server events.js:183 throw er; // Unhandled 'error' event ^ Error: listen EADDRNOTAVAIL 10.212.109.18:8087 at Object._errnoException (util.js:992:11) at _exceptionWithHostPort (util.js:1014:20) at Server.setupListenHandle [as _listen2] (net.js:1338:19) at listenInCluster (net.js:1396:12) at doListen (net.js:1505:7) at _combinedTickCallback (internal/process/next_tick.js:141:11) at process._tickCallback (internal/process/next_tick.js:180:9) at Function.Module.runMain (module.js:695:11) at startup (bootstrap_node.js:191:16) at bootstrap_node.js:612:3 npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! y@1.0.0 server: `webpack-dev-server` npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the y@1.0.0 server script. npm ERR! This is probably not a problem with npm. There is likely additional logging output above. npm ERR! A complete log of this run can be found in: npm ERR! C:\Users\勾丽娜\AppData\Roaming\npm-cache\_logs\2018-07-11T07_46_12_914Z-debug.log PS F:\webLearn\webpackLearn>
修改好正确的ip地址就可以运行成功了,哈哈
阅读更多相关文章推荐
- extract-text-webpack-plugin插件提取css单独打包
- 【Issues-Webpack-N1】extract-text-webpack-plugin使用css-loader报错
- 用extract-text-webpack-plugin提取出来的css文件中背景图片url的不正确的问题
- webpack extract-text-webpack-plugin
- Webpack2/3配置ExtractTextPlugin和Autoprefixer
- extract-text-webpack-plugin
- extract-text-webpack-plugin 的使用及安装
- 详解extract-text-webpack-plugin 的使用及安装
- webpack3最新版本配置研究(三)多入口,html-webpack-plugin, extract-text-webpack-plugin
- webpack "extract-text-webpack-plugin" 打包报错loader is used without the corresponding plugin
- webpack---编译sass并分割css为独立文件,通过extract-text-webpack-plugin分割文件
- extract-text-webpack-plugin 作用、安装、使用
- vue-cli 新创建的项目启动报错 Module build failed: Error: "extract-text-webpack-plugin"
- Webpack安装extract-text-webpack-plugin遇见的两个问题
- extract-text-webpack-plugin 的使用及安装
- extract-text-webpack-plugin" loader is used without the corresponding plugin How to deal
- Webpack 常见静态资源处理 - 模块加载器(Loaders)+ExtractTextPlugin插件
- webpack学习笔记-5-extract-text-webpack-plugin
- 使用webpack2和extract-text-webpack-plugin时遇到Chunk.entry was removed. Use hasRuntime()错误的解决方法
- extract-text-webpack-plugin 的使用及安装