webpacke踩坑-新手

常见错误：

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