webpacke踩坑-新手

一、 题叶-webpack入门指南

二、 webpack入门系列

三、 w3ctech的webpack入门及实践

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

五、 webpack 单页面应用实战

六、 webpack学习笔记

七、 Rynxiao/webpack-test

八、 array_huang的webpack系列教程

九、 阮一峰老师的webpack Demo

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

十一、 webpack指南（配置参考，以为这位大神写的结构很清晰，一目了然）

常见错误：

一、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 

五、报如下错误，发现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 以后就能够了。