webpack基本使用01

webpack的配置

webpack是一个打包工具，不用再在意各个js文件的命名冲突问题，因为webpack内部给我们增加了模块化打包。将多个js统一放到一个js里（main.js）,

webpack.config.js配置

**：一般放在文件的根目录。配置文件路径，var webpack = require('webpack');//得到webpack中的方法 const path = require('path')//node中的路径配置方法 const HtmlWebpackPlugin = require('html-webpack-plugin')//配置html代码，通常与devServer(搭建本地服务器一起用) const UglifyjsWebpackPlugin = require('uglifyjs-webpack-plugin')//压缩文件包 module.exports = { entry: 'src/main.js',//给main.js这个文件进行打包 output: { path: path.resolve(__dirname,'dist'),//path必须是绝对路径 filename: 'bundle.js'//打包后的文件名 }, module: { rules: [ { test: /\.css$/i, use: ["style-loader", "css-loader"], }, { test:/\.vue$/, use:['vue-loader'] } ], }, resolve:{ alias:{'vue$':'vue/dist/vue.esm.js'}//使vue可以使用template }, plugins: [ new webpack.BannerPlugin('所有版权...'),//所以打包的文件的开头注释 new UglifyjsWebpackPlugin(),//进行文件压缩 new HtmlWebpackPlugin({ //打包哪个html文件夹 template:'index.html' }) ], devServer:{ //搭建本地服务器 contentBase:'./dist', //和path一样，都必须是绝对路径 inline:true } };
8. *

*package.json配置

**使用npm init进行配置后就会创建一个package.json文件（定义了这个项目中所需要的各种模块，以及配置信息），通过npm install或npm i进行各种模块的配置。
9. package.json文件的配置信息：name字段：项目名字

version字段：版本号

author字段：作者

main字段：指定加载的入口文件

config字段：用来添加命令行的环境变量

scripts字段：指定了运行脚本命令的npm命令行缩写，比如start指定了运行npm run start时，所要执行的命令

dependencies字段：指定了项目运行所依赖的模块

devDependencies字段：指定了项目开发所需要的模块

license字段：软件许可证，规定和限制软件用户使用软件（或其源代码）的权利
10. 举个例子，打包css文件。1.首先先配置相应的模块：npm i css-loader@版本号(如果不加自动默认生成最高版本) -D，2.在webpack.config.js文件中配置相应的module，上面已有，请参考，也可以在package.json文件中查看版本号，以及配置环境(开发时环境和生产环境)。修改package.json中某个模板的版本号时，需要重新npm install加载，就可以修改成功了

webpack的安装

需要安装node,在（http://nodejs.cn/download/）中下载，cmd可以用window+R来打开，先安装全局，随后在每个项目中安装局部（后面说到为什么要在每个文件中安装局部）

1. 全局安装 ：npm install webpack -g
2. 局部安装 npm install webpack -D或npm i webpack -S；
3. 安装时-D和-S的区别：-D是–save-dev的缩写，这样安装的包的名称及版本号就会存在package.json的devDependencies（开发时依赖），**-S是–save的缩写会将包的名称及版本号放在dependencies（生产时依赖）里面
4. webpack目录结构
5. webpack目录结构命名dist文件夹是打包后的代码，src是源码的文件，src文件里包含了js，css，less等文件。
6. main.js是文件的入口文件，将多个js文件都封装到这里。所以在进行打包的时候是打包main.js，随后在mian.js在打包其余的js文件。