11、webpack指南（配置参考，觉得这位大神写的结构很清晰，一目了然）
常见错误： 1、babel-loader 找不到
基本自己遇到的是cnpm安装下，npm安装下就好了（网上有说是node版本问题？）
babel-loader依赖于babel-core
es6->es5还需要安装babel-preset-es2015 2、关于css方面的报错
1)、loader执行顺序由右往左,一般在写css和sass的loader时尽量这样写
{
test:/\.css$/,
loader: ExtractTextPlugin.extract('style-loader', 'css-loader')
},
{
test:/\.scss$/,
loader:ExtractTextPlugin.extract('style-loader', 'css-loader!sass-loader')
}
//一般这里的错误在test下面的loader被写成loaders方式，或者里面的引入loader写法错误
//运用ExtractTextPlugin方式独立导入不要忘记安装这个插件的loader还有在plugins中执行new ExtractTextPlugin("css/[name].css"), 3、引入全部图片的时候报错找不到loader等
下面这是可以执行的方法：
include: [path.resolve(__dirname, "src/image")],
开始的时候自己错误的写成了--->
include:'./src/image/' //这种方式时错误的 下面贴图片loader和字体loader的代码——>
// 图片 loader
{
test: /\.(jpe?g|png|gif|svg)$/i,
loader: 'url-loader',
query: {
limit: 10000,
name: '/image/[name].[ext]'
},
include: [path.resolve(__dirname, "src/image")],
},
// 字体loader
{
test: /\.(eot|woff|woff2|ttf|svg)$/,
loader: 'url-loader',
query: {
limit: 5000,
name: '/font/[name]-[hash:8].[ext]'
}
} 4、其他莫名其妙的错误
1)之前莫名其妙报错最后发现是写错代码了
module.exports
被自己错误的写成了
module.export 5、报以下错误，发现node_modules\node-sass\vendor 不存在 ERROR in ENOENT: no such file or directory, scandir 'E:\work\test\webpacktest\test3\node_modules\.3.11.1@node-sass\vendor'
@ ./src/css/style.scss 4:14-137 解决方法：
npm rebuild node-sass 就解决所有问题了【需要安装visual studio 2015，并 执行 npm config set msvs_version 2015】 每次执行编译前清空输出目录
CleanWebpackPlugin = require('clean-webpack-plugin') //需要安装插件 //在plugins中写，‘dist’为输出目录
new CleanWebpackPlugin(['dist'], {
root: '', // An absolute path for the root of webpack.config.js
verbose: true, // Write logs to console.
dry: false // Do not delete anything, good for testing.
}), 常用的执行命令
//写在package.json中
"scripts": {
"dev": "webpack-dev-server --inline --hot",
"build": "cross-env NODE_ENV=production webpack --progress --hide-modules",
"predeploy": "npm run build",
"deploy": "surge --project . --domain vue-2-simple-routing-example.surge.sh"
}, //在webpack.config.js的module.exports里面写-->例子，完整的看官网
devServer: {
// Enable history API fallback so HTML5 History API based
// routing works. This is a good default that will come
// in handy in more complicated setups.
historyApiFallback: true, // Unlike the cli flag, this doesn't set
// HotModuleReplacementPlugin!
hot: true,
inline: true, // Display only errors to reduce the amount of output.
// stats: 'errors-only', host: "localhost", // Defaults to `localhost` process.env.HOST
port: "8081", // Defaults to 8080 process.env.PORT
}
//webpack-dev-server只是相当于建一本地服务器，--hot开启热加载（但是我本地开启了不仅html连css改动都没变化） //暂时自己用webpack -w --devtool source-map
//仅用来编译css和js之类的，手动刷新... # 常用的loader css-loader //转义css
style-loader //转义css
sass-loader //转义scss文件
node-sass //安装sass-loader则必装
file-loader //url-loader则必装此插件
html-loader
url-loader //图片，字体等需要用上
extract-text-webpack-plugin //独立css
html-webpack-plugin //执行分配html
jquery
webpack
webpack-dev-server //建立本地服务器
expose-loader //全局声明？？
babel-loader
babel-core //安装babel-loader则必装
babel-preset-es2015
open-browser-webpack-plugin //自动打开浏览器
webpack-validator //验证是否正确 cnpm install babel-core babel-loader babel-preset-es2015 extract-text-webpack-plugin file-loader html-webpack-plugin jquery node-sass sass-loader url-loader file-loader webpack css-loader style-loader webpack-dev-server open-browser-webpack-plugin --save-dev # 常用片段 ## jquery --用来全局引入jquery类似shim
第一种方法
jquryPath = path.resolve(node_modules, 'jquery/dist/jquery.min.js');
resolve: {
alias: {
'jquery': jquryPath,
},
extensions: ['', '.js', '.json']
},
var providePlugin = new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
'window.jQuery': 'jquery',
'window.$': 'jquery',
});
第二种方法
{
test: require.resolve('jquery'), // 此loader配置项的目标是NPM中的jquery
loader: 'expose?$!expose?jQuery', // 先把jQuery对象声明成为全局变量`jQuery`，再通过管道进一步又声明成为全局变量`$`
}, 如果需要使用babel-preset-es2015的话需要在文件下创建一个.babelrc：
{
"presets": ["es2015"]
}
或者也可以放到packjson里面 # git提交配置--不提交指定目录文件 新建一个.gitignore的文件，在里面写格式如下： node_modules/
src/
npm-debug.log # 常用启动命令
"start": "webpack-dev-server --hot --inline" # 额外东西 ## CommonJS写法 eg:
nav.js---- function getNav(){
var el=document.getElement.querySelectorAll('.nav');
return el.innerHTML;
}
module.exports= getNav; main.js---- var nav=require('./nav');
console.log(nav()) ######## 需要强烈注意到几个点： ## 1、loder的执行顺序是从右到左 npm安装node-sass模块的时候，会卡在 node scripts/install.js这里，因为要去github.com上下载二进制源码，众所周知的原因，国内的网络上github.com速度太不稳定了，所以安装很慢。
这里推荐一种极速安装的方法，当然还是使用万能的淘宝镜像源。
打开~/.npmrc（windows用户打开 c:\Users\当前用户名\.npmrc） SASS_BINARY_SITE=https://npm.taobao.org/mirrors/node-sass/ 增加一行npm install 之后就可以了。