求高手教一下怎么分离HTML.CSS.JS分离的方法

html-css080

求高手教一下怎么分离HTML.CSS.JS分离的方法,第1张

你们HTML.CSS.JS都写在同一个文件麼？？以<script>***</script>包围的是js代码，<style>***</style>包围的是css代码。其他就是html的了....把它们各自写到同一个地方就好。文件的话，js是以js为後缀的文件，css是以css为後缀的文件。

这样就可以完美的解决我们提取css的需求。但是官方不建议我们这样做。他们认为CSS就该打包到JS中减少请求数，看需求吧。

然后在 修改最初的module模块下面的rule里面的css规则变成

上面将css分离出来了。但是图片路径可能不太对

这个不是我们想要的。所以我们要用到publicPath来解决。

在处理前我们在webpack.config.js上声明一个对象叫做 website

这里特别注意的就是 IP和端口 是你本机的IP和你配置的端口

然后在output选项中引用这个对象的publicPath属性

var ExtractTextPlugin = require('extract-text-webpack-plugin')

普通.css文件

{test: /\.css$/,loader: ExtractTextPlugin.extract('style', 'css', 'postcss')

}

.vue中的需要单独配置vue: {loaders: { css: ExtractTextPlugin.extract('css'),

html: 'html-loader'http:www.baidu.com

}

}

最后，在plugins中添加new ExtractTextPlugin("css/[name].css", { allChunks: true })

注意：如果使用了按需加载，一定要加入这句 { allChunks: true } {http://r.yuzhua.com}，不然css样式无效