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 以後就能夠了。