目前webpack已经到了3.X版本，为了方便通过最新版本打包整个前端应用，现在开始对webpack操作进行简单介绍。
一、webpack安装
在安装webpack之前需要注意，webpack是通过npm进行安装的，而npm存在于node.js中，类似于redhat系统的yum，都是包管理工具，只不过npm是前端框架安装管理工具而已，在安装npm需要安装node.js
1、登录node.js官网：
https://nodejs.org/zh-cn/
2、在官网选择TLS稳定版本进行安装，如果是mac系统可以通过自身的brew工具，直接进行安装（brew install nodejs）
3、在安装完毕后，直接输入nodejs -v和npm -v如果有输出值，说明安装完毕
3.1、npm安装完毕后，自己创建一个文件夹my-web，今日该文件夹后执行 npm init --yes（或者-y）初始化一个package.json的文件，这个文件里会包含如下信息
{ "name": "vue-loader-demo", "version": "1.0.0", "description": "", "main": "main.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "dev": "webpack-dev-server --inline --hot" }, "keywords": [], "author": "", "license": "ISC", "dependencies": {}, #如果是--save会出现在这个{}内 "devDependencies": { #如果是--save-dev会出现这个{}内 "babel": "^6.23.0", "babel-cli": "^6.26.0", "babel-core": "^6.26.0", "babel-plugin-transform-runtime": "^6.23.0", "babel-preset-env": "^1.6.1", "babel-preset-es2015": "^6.24.1", "babel-runtime": "^6.26.0", "css-loader": "^0.28.7", "style-loader": "^0.19.0", "vue-hot-reload-api": "^2.2.3", "vue-html-loader": "^1.2.4", "vue-loader": "^13.5.0", "vue-style-loader": "^3.0.3", "vue-template-compiler": "^2.5.3" } }
4、安装完毕后，由于npm在国外，所以可以通过安装国内的淘宝cnpm加快安装速度
登录到https://npm.taobao.org/
找到安装步骤里的安装执行命令，在终端执行：
npm install -g cnpm --registry=https://registry.npm.taobao.org
5、 安装完毕后，webpack可以通过cnpm命令进行安装
6、执行cnpm install webpack --save（--save表示永久存在，在生产环境需要，--save-dev表示在开发环境中存在）
执行完毕后，webpack安装完毕
二、webpack文件说明
webpack文件为webpack.config.js文件，格式如下：
const path = require('path') //定义pathmodule.exports={ entry:{ one:'./src/one.js' //入口文件 }, output:{ path: path.resolve(__dirname, 'dist'), //这个是node.js中引入绝对路径的命令 filename: 'output.js' //webpack执行后的出口文件 }, module:{ }, plugins:[], devServer:{},}在3.X时候可以定义多个入口与出口文件
const path = require('path') //定义path module.exports={ entry:{ one:'./src/one.js', //入口文件 two:'./src/two.js' }, output:{ path: path.resolve(__dirname, 'dist'), //这个是node.js中引入绝对路径的命令 filename: '[name].js' //webpack执行后的出口文件,【name】表示和每一个对应入口文件 }, module:{ }, plugins:[], devServer:{}, }
三、webpack-dev-server
3.X开始webpack-dev-server无需单独下载，只需要下载webpack后就会跟着自动下载，同时在webpack.config.js文件中填写配置，还可以实现热更新
const path = require('path') //定义path module.exports={ entry:{ one:'./src/one.js', //入口文件 two:'./src/two.js' }, output:{ path: path.resolve(__dirname, 'dist'), //这个是node.js中引入绝对路径的命令 filename: '[name].js', //webpack执行后的出口文件,【name】表示和每一个对应入口文件 publicPath: '/temp/' //把临时修改都更新到temp目录下，这个目录是不建立的，是虚拟在内存中的目录 }, module:{ }, devServer:{//配置dev-server contentBase: path.resolve(__dirname, './'), host: '192.168.2.104', compress:true,//HTML5压缩 port:9000 }, }如果感觉在终端敲webpack-dev-server很麻烦，可以在package.json文件中将它写在scripts下，然后执行npm run server就直接运行了
{ "name": "webpack3learn", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "server": "webpack-dev-server"//在这里增加这个命令，可以简化敲命令的长度 }, "keywords": [], "author": "", "license": "ISC" }
四、模块
1、css打包
使用css打包功能必须使用css.loader和style.loader这两个配合使用，首先登录npmjs的官网找到css-loader：
https://www.npmjs.com/搜索css-loader
找到相关命令，安装：
cnpm install css-loader style-loader --save-dev安装完毕后，查看模块填写参数，webpack.config.js中：
module: { rules: [ { test: /\.css$/, use: ['style-loader', 'css-loader'] } ] }, const path = require('path') //定义path module.exports = { entry: { one: './src/one.js', //入口文件 two: './src/two.js' }, output: { path: path.resolve(__dirname, 'dist'), //这个是node.js中引入绝对路径的命令 filename: '[name].js', //webpack执行后的出口文件,【name】表示和每一个对应入口文件 publicPath: '/temp/' //把临时修改都更新到temp目录下，这个目录是不建立的，是虚拟在内存中的目录 }, module: { rules: [ { test: /\.css$/, use: ['style-loader', 'css-loader'] } ] }, devServer: {//配置dev-server contentBase: path.resolve(__dirname, './'), host: '192.168.2.104', compress: true,//HTML5压缩 port: 9000 }, } View Code在src目录下添加one.css文件
body{ background:#666; color:#fff; }
转载于:https://www.cnblogs.com/xiaopi-python/p/7815057.html
