Code Monkey home page Code Monkey logo

webpack-for-fools's Issues

这样纸,就能实现hot-loader? 无须加

这样纸就可以:
{
test: /.jsx?$/,
exclude: /(node_modules|bower_components)/,
loader: 'babel',
query: {
presets: ['react', 'es2015']
}
}

无须这样:
{ test:/\.jsx?$/, loaders:['react-hot', 'babel?presets[]=es2015&presets[]=react'], include:APP_PATH }

星期一想说的,一时找不到之前的配置了。
刚刚看了一眼,发现版主已经更新了。

安装webpack-dev-server之后运行,总是提示找不到webpack/hot/dev-server

我是按照第一篇教程一步一步进行的,安装了全局的webpack,和全局的webpack-dev-server,然后在package.json里添加了scripts:start: webpack-dev-server --hot --line,运行npm start,就是报错,页面也出不来。

ERROR in multi main
Module not found: Error: Cannot resolve module 'webpack/hot/dev-server' in D:\My
Web\webpack
 @ multi main
webpack: bundle is now VALID.

Webpack傻瓜式指南(一)安装babel-loader、babel-preset-es2015报错

还需要安装一个babel-core模块,不然会报如下的错误:

ERROR in ./app/index.js
Module build failed: Error: Cannot find module 'babel-core'
    at Function.Module._resolveFilename (module.js:469:15)
    at Function.Module._load (module.js:417:25)
    at Module.require (module.js:497:17)
    at require (internal/module.js:20:19)
    at Object.<anonymous> (/Users/uesrHome/demo/webpack/node_modules/babel-loader/lib/index.js:4:13)

博客中忘记写安装babel-core模块了。

解析sass文件问题

照着例子做,到sass那里总是报错,原来要安装sass-loader 和 node-sass,才能解析.scss文件
npm install sass-loader node-sass --save-dev

CommonsChunkPlugin生成的vendor无用

我用CommonsChunkPlugin合成vue,vue-resource,成功生成了vendor并且导入到了html里,但是用vue还是报vue不存在。

entry: { index: './src/js/page/index.js', vendor: ['./src/js/lib/vue.js','./src/js/lib/vue-resource.js'] },

plugins: [ // new webpack.ProvidePlugin({ //加载jq // $: 'jquery' // }), new ExtractTextPlugin('css/[name].css'), //单独使用link标签加载css并设置路径,相对于output配置中的publickPath new webpack.optimize.CommonsChunkPlugin('vendor', 'js/vendor.bundle.js'), //HtmlWebpackPlugin,模板生成相关的配置,每个对于一个页面的配置,有几个写几个 new HtmlWebpackPlugin({ //根据模板插入css/js等生成最终HTML filename: './views/index.html', //生成的html存放路径,相对于path template: './src/views/index.html', //html模板路径 inject: 'body', //js插入的位置,true/'head'/'body'/false hash: true, //为静态资源生成hash值 chunks: ['index'],//需要引入的chunk,不配置就会引入所有页面的资源 minify: { //压缩HTML文件 removeComments: true, //移除HTML中的注释 collapseWhitespace: false //删除空白符与换行符 } }) ],

HtmlwebpackPlugin这个配置里面的疑问。

 new HtmlwebpackPlugin({
    title: 'Hello Mobile app',
    template: path.resolve(TEM_PATH, 'mobile.html'),
    filename: 'mobile.html',
    chunks: ['app', 'vendors'],
    inject: 'body'
  })

这里的chunks我感觉应该是['mobeil', 'vendors']才对啊。

没一个让人省心的,一大堆报错

0 info it worked if it ends with ok
1 verbose cli [ 'E:\NODE\node.exe',
1 verbose cli 'E:\NODE\node_modules\npm\bin\npm-cli.js',
1 verbose cli 'run',
1 verbose cli 'dev' ]
2 info using [email protected]
3 info using [email protected]
4 verbose run-script [ 'predev', 'dev', 'postdev' ]
5 info predev [email protected]
6 info dev [email protected]
7 verbose unsafe-perm in lifecycle true
8 info [email protected] Failed to exec dev script
9 verbose stack Error: [email protected] dev: webpack-dev-server
9 verbose stack Exit status 1
9 verbose stack at EventEmitter. (E:\NODE\node_modules\npm\lib\utils\lifecycle.js:217:16)
9 verbose stack at emitTwo (events.js:87:13)
9 verbose stack at EventEmitter.emit (events.js:172:7)
9 verbose stack at ChildProcess. (E:\NODE\node_modules\npm\lib\utils\spawn.js:24:14)
9 verbose stack at emitTwo (events.js:87:13)
9 verbose stack at ChildProcess.emit (events.js:172:7)
9 verbose stack at maybeClose (internal/child_process.js:827:16)
9 verbose stack at Process.ChildProcess._handle.onexit (internal/child_process.js:211:5)
10 verbose pkgid [email protected]
11 verbose cwd D:\Program Files (x86)\XAMPP\htdocs\webpack\webpack-react-kit
12 error Windows_NT 10.0.10586
13 error argv "E:\NODE\node.exe" "E:\NODE\node_modules\npm\bin\npm-cli.js" "run" "dev"
14 error node v4.4.3
15 error npm v2.15.1
16 error code ELIFECYCLE
17 error [email protected] dev: webpack-dev-server
17 error Exit status 1
18 error Failed at the [email protected] dev script 'webpack-dev-server '.
18 error This is most likely a problem with the webpack-react-kit package,
18 error not with npm itself.
18 error Tell the author that this fails on your system:
18 error webpack-dev-server
18 error You can get information on how to open an issue for this project with:
18 error npm bugs webpack-react-kit
18 error Or if that isn't available, you can get their info via:
18 error
18 error npm owner ls webpack-react-kit
18 error There is likely additional logging output above.
19 verbose exit [ 1, true ]

对于新手来说真是痛苦,也不知道哪里有问题

局部热更新,组建重复问题

用了npm install babel-preset-react-hmre --save-dev 后,局部热更新确实可以了,
但是每修改一次,render的内容就好重复一次。。。
假如修改了3次,界面大概是这样子的:

Search Github User testtesttest

Search Github User testtesttest

Search Github User testtesttest

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.