webpacke踩坑-新手

1、题叶-webpack入门指南

2、webpack入门系列

3、w3ctech的webpack入门及实践

4、Express结合Webpack的全栈自动刷新

5、webpack 单页面应用实战

6、webpack学习笔记

7、Rynxiao/webpack-test

8、array_huang的webpack系列教程

9、阮一峰老师的webpack Demo

10、vuefe的webpack教程(持续更新中)

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 之后就可以了。