webpacke踩坑-新手
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 之后就可以了。
