webpack-init-project: A JavaScript repository from hewxwshining

一、webpack 使用

模块处理：将加载的文件处理成大部分浏览器都可以兼容的原生的js文件

注：Webpack 本身只能处理 JavaScript 模块，如果要处理其他类型的文件，就需要使用 loader 进行转换

例如：使用在应用中添加CSS文件，首先添加依赖，用命令来安装 css-loader 和 style-loader(全局安装需要参数 -g)

npm install css-loader style-loader

webpack.config.js文件配置CSS模块

module:{
	loaders:[{
		test:/\.css$/,
		loader:['style-loader','css-loader']
	}]
}

//1. test：使用正则表达式检查文件是否是loader执行的文件；
//2. loader：预处理文件，处理顺序是从右往左；
//3. css-loader：遍历 CSS 文件，找到 url() 表达式后处理引入的内容；
//4. style-loader：将require('./index.css')中的CSS样式直接注入到主页中的style标签中；

二、webpack-dev-server介绍及配置

webpack-dev-server是webpack官方提供的一个小型Express服务器。使用它可以为webpack打包生成的资源文件提供web服务。webpack-dev-server官方文档 webpack-dev-server 主要提供两个功能：

为静态文件提供服务
自动刷新和热替换(HMR)

用下面一个简单项目的创建与运行的流程为例

基本流程

在命令下进入到项目中，使用 npm init 初始化项目，得到 package.json 文件
全局安装 webpack-dev-server

npm i webpack-dev-server -g
添加 webpack-dev-server --save-dev 项目依赖

npm i webpack-dev-server
添加 webpack 配置文件 webpack.config.js
启动 webpack-dev-server即可启动服务，在地址栏输入：http://localhost：8080即可查看页面
使用 npm start 启动服务，只需要在package.json中 scripts字段中添加指令即可

"scripts": { "start": "webpack-dev-server --progress --color" },

webpack.config.js基本配置

var path = require('path');
module.exports = {
	entry:{
		admin:'./admin/index.js',
		index:'./index/index.js'
	},
	output:{
		path: path.join(__dirname,'dist'),
		filename:'[name].bundle.js'，
		publicPath:'/dist/'
	},
// module:{
 //	loaders:[{
 //		test:/\.css$/,
 //		loader: ['style-loader','css-loader']
 //	}]
 //}
}

publicPath: 服务器启动时，访问的目录地址，使用webpack-dev-server时是必须有该参数；

hewxwshining/webpack-init-project

一、webpack 使用

二、webpack-dev-server介绍及配置