Webpack & Vue 坑

@(webpack)

1.webpack-dev-server不起作用

webpack-dev-server无法实时刷新？

修改webpack.config.js配置的scripts项

"scripts": {
    "start": "webpack-dev-server --hot --inline"
}

在webpack.config.js的output项内添加进行修改：

//指向异步加载的路径
publicPath: __dirname + '/build/'

替换为：

publicPath: '/build/'

运行npm start

为什么这样做呢？因为我们这前用webpack是把组件异步加载在本地上，而我们用了热替换后是地址委托到了http://localhost:8080/端口了，所以要去掉__dirname(指向本地根目录)，一切准备完毕了，接下来直接运行npm start，然后打开http://localhost:8080/就可以访问并实时刷新。

2.sass&css单文件打包

很多时候我们不喜欢require进来的css或者sass被添加到html的style标签中，而是作为单独的css文件被html引用。

安装extract-text-webpack-plugin插件

npm install extract-text-webpack-plugin --save-dev

配置webpack.config.js

//a.先require进来
var ExtractTextPlugin = require("extract-text-webpack-plugin");
//b.再添加到plugins中
plugins: [
	new ExtractTextPlugin("styles.css")
]

修改module的loaders配置

//需要知道的是，ExtractTextPlugin.extract 第二个参数(或拆分为多个参数)中 loader 的执行顺序是从右到左，即先对引入的 .sass 使用 sass loader 得到编译后的 css 再使用 css-loader 按照正常 css-loader 的方式处理。
loaders: [
	{
		test: /\.css$/,
		loader: ExtractTextPlugin.extract("style-loader", "css-loader")
	}, {
		test: /\.scss$/,
		loader: ExtractTextPlugin.extract("style-loader", "css-loader!sass-loader")
	}
]

参考：http://webpack.github.io/docs/stylesheets.html#separate-css-bundle

3.Vue踩坑之一：template无法在table中使用

未解决。

4.Vue踩坑之二：字体在生产环境的bug

正常开发时我们会这么设置字体：

.wrap{
  font-family: "微软雅黑"; /* 或者 */
  font-family: "\5FAE\8F6F\96C5\9ED1";
}

执行 npm run build后，字体没生效，F12查看发现代码变成这样了：

.wrap{
  font-family: \\5FAE\8F6F\96C5\9ED1;
}

修改方法：

.wrap{
  font-family: \5FAE\8F6F\96C5\9ED1; /* 去掉双引号！ */
}

007sair / 007sair.github.io Goto Github PK

007sair.github.io's People

Watchers

Forkers

007sair.github.io's Issues

flex样式预览工具 | Chan

我又回来啦！ | Chan

Webpack & Vue 坑

Webpack & Vue 坑

1.webpack-dev-server不起作用

2.sass&css单文件打包

3.Vue踩坑之一：template无法在table中使用

4.Vue踩坑之二：字体在生产环境的bug

Recommend Projects

React

Vue.js

Typescript

TensorFlow

Django

Laravel

D3

Recommend Topics

javascript

web

server

Machine learning

Visualization

Game

Recommend Org

Facebook

Microsoft

Google

Alibaba

D3

Tencent