关于webpack的一些坑..

安装webpack全局版,

npm install webpack -g

装完后在项目上跑

webpack --version

提示 webpack不是内部或外部命令,也不是可运行的程序或批处理文件。

看来没装成功。

警告表示找不到一个package.json文件。

那么正确的,大伙们推荐的安装流程如下。

1. 由于不同的项目可能需要依赖不同版本的webpack,所以推荐本地安装,不推荐全局安装。

2. 本地安装前,先找一个空的文件夹(比如名字就叫webpackBaba),在这个文件夹下打开CMD, 使用 npm init 命令(自动)创建package.json文件。

npm init 

然后CMD会问你一系列问题,按照需要填。具体看项目要求。自己创建着玩的,就随便写。

这样你就可以发现这个webpack爸爸文件夹下的package.json文件。

3. 在本项目安装Webpack作为依赖包。

npm install --save-dev webpack

ok,webpackBaba文件夹下,多了一个名叫 node_modules 文件夹,里面有很多很多的文件。

第一个坑结束(我觉得我肯定是哪天手贱把package.json给删了),下面看第二个坑。

大神们会谦虚地说,他们是代码的搬运工。而我则诚惶诚恐、恨不得掘地三尺掩埋自己:我是bug的生产者。

一步一步跟着教程往前走,创建app文件夹(放js文件),创建public文件夹(index.html),再配置webpack.config.js。

找不到 require这个 function or method,找不到module。require这个方法,貌似是node里面的。

按照图里标注的 1 2 3 步骤,添加 Node.js Core Modules,一路确认下去。

另外别忘了配置本地环境变量。把webpack所在的地址复制到path里。

问题解决了。至少编译器不警告我说没有require这个函数或者方法,也不会找不到module是什么鬼。至于这几行bug能不能跑起来,看运气吧。

webpack.config.js干啥用的?

可以看作一个小的js模块,把所有打包相关的信息放到这个配置文件里,这样打包的时候就不用在CMD那边输入长长长长的命令。要知道,我刚刚就手滑把webpack输成了weppack。

package.json 的另外一个“偷懒”作用

把package.json下的“script”属性改成这样:

 "scripts": {
    "start": "webpack" 
  },

这里的script会按照一定的顺序寻找命令对应的位置。

此时在项目的CMD,只要输入 npm start,就会在配置文件配置的路径下打包出一个bundle.js。手滑星人表示:爽!

使用webpack构建本地服务器&Babel的安装与配置

/*webpack.config.js 配置文件*/

module.exports = { devtool:'eval-source-map', //配置source-maps,对应编译文件和源文件的方法,这样容易找bug。 entry: __dirname + "/app/main.js", output:{ path: __dirname + "/public",//打包后的文件存放的地方 filename: "bundle.js" //打包后输出的文件名 },
//npm install --save-dev webpack-dev-server 安装devserver组件,构建本地服务器. CMD输入:npm run server devServer:{ contentBase: "./public", //本地服务器所加载的页面所在的目录 historyApiFallback:true,//不跳转 inline:true //实时刷新 }, //安装babel等多个依赖包,用空格隔开: // npm install --save-dev babel-core babel-loader babel-preset-es2015 babel-preset-react //成功后配置: module:{ rules:[ { test:/(.jsx|.js)$/,//必须的正则. 配置允许使用ES6以及JSX的语法 use:{ loader:"babel-loader", options:{ presets:[ "es2015","react" ] } }, exclude:/node_modules/ } ] } };

////未完待续。后续看看vue里面怎么用这个打包。

原文地址:https://www.cnblogs.com/dodocie/p/7699533.html