运行
npm run dev
执行的是 dev-server.js
vue-cli的webpack配置分析
一,入门:
1,全局安装webpack;npm install -g webpack;
2,新建一个根文件夹存放项目,里面新建一个package.json文件,新建方法是:npm init,然后会有一系列选项,默认就好;
3,cd到新建的根文件夹,安装webpack,npm install webpack --save-dev,执行之后会出现一个node_modules文件夹
4,最简单的打包:通过配置文件来打包,在根文件夹下新建一个webpack.config.js的js配置文件,在里面指定唯一的入口文件和输出文件.在命令台通过webpack命令即可打包.
module.exports={
entry:__dirname+"/app/main.js",//唯一的入口文件,除了事例的写法,还可以"./app/main.js".这个点不能少.
output:{
path:__dirname+"/public",//打包后的存放位置,可以引入path模块,然后path.resolve捏合路径path:path.resolve(__dirname,'public')
filename:"bundle.js"//打包后输出的文件名
}
5,在4的基础上,通过在package.json的scripts属性添加属性,将npm的start命令指向webpack,这可以直接通过npm start启动打包功能,记住,键值都需要双引号.
"start":"webpack"
二:进阶
1,生成source map,使调试更容易,因为代码经过编译之后出现错误需要定位,所以需要source map,通过配置devtool属性的值来生成不同的sourcemap.devtool的值是通过eval cheap source-map module inline五个特性组合起来的.
eval： 使用eval包裹模块代码
source-map： 产生.map文件
cheap： 不包含列信息（关于列信息的解释下面会有详细介绍)也不包含loader的sourcemap
module： 包含loader的sourcemap（比如jsx to js ，babel的sourcemap）
inline： 将.map作为DataURI嵌入，不单独生成.map文件（这个配置项比较少见）
在webpack.config.js中加上:
devtool:'eval-source-map',//配置生成Source Maps，选择合适的选项
2,使用webpack构建本地服务器.实时监测并刷新代码,先安装webpack-dev-server.npm install webpack-dev-server --save-dev.
devserver作为webpack配置选项中的一项，具有以下配置选项
contentBase: 默认webpack-dev-server会为根文件夹提供本地服务器，如果想为另外一个目录下的文件提供本地服务器，应该在这里设置其所在目录（本例设置到“public"目录）
port: 设置默认监听端口，如果省略，默认为”8080“
inline: 设置为true，当源文件改变时会自动刷新页面
colors: 设置为true，使终端输出的文件为彩色的
historyApiFallback: 在开发单页应用时非常有用，它依赖于HTML5 history API，如果设置为true，所有的跳转将指向index.html
3,loader使用:
1,cnpm install --save-dev loader名称
2,loader的作用是将其他的资源文件转换成js文件.比如css png图片 ts代码等等.
3,loader是在配置文件的module下面的rules选项,rules是个数组,每一条信息对应一个loader(在webpack早期版本中rules用的是loaders),test是一个正则表达式的匹配对象,不需要引号,use表示使用哪个loader,如果有多个loader,放在数组中.(在webpack早期版本中use用的是loader)