webpack的配置使用common。js的模块化输出

一、介绍

模块打包器

支持es6模块化、amd、common

二、不同

代码分割

loader

热更新

插件

三、安装和命令行

mkdir webpack-text

进入文件夹，npm init ,npm install webpack --save-dev

打包：webpack hello.js hello.bundle.js

打包过程会生成自己所需的一些内置的函数，管理依赖关系然后根据依赖关系对模块进行编号

四、loader

npm install css-loader style-loader --save-dev

require('style-loader!css-loader!./style.css')

这样我们写的css就会包含在style标签里，插入文档顶部

还可以在命令行里指定：webpack hello.js hello.bundle.js --module-bind 'css=style-loader!css-loader'

这是给模块绑定loader，

文件改变的时候，使用--watch可以使webpack自动更新自动打包

--progress可以看到打包过程

--display-modules 看打包模块

--display-reasons为什么打包模块的原因

五、建立webpack的配置文件

从零开始新建一个项目

mkdir webpack-demo

cd webpack-demo

npm init

npm install webpack --save-dev

mkdir src

src目录下script和style等文件

mkdir dist

新建初始化页面index.html

引入打包后的js文件bundle.js

项目根目录下新建webpack.config.js

,webpack自动寻找这个文件执行，

使用common。js的模块化输出

module.exports = {    entry: './src/script/main.js',//项目的入口文件
    output： {
        path: './dist/js',//打包后文件存放路径，如果没有js文件夹，就会自动创建
        filename: 'bundle.js'//生成的文件名
}
在高版本的webpack里，需要这样写：
const path = require('path')
module.exports = {
	entry : './src/scripts/main.js',
	output : {
		path: path.resolve(__dirname,'./dist/js'),
		filename: 'bundle.js'	
	}
}

新建main.js文件

function hello (){}

然后执行打包，直接运行webpack

可以用命令行运行 webpack --config webpack.dev.config.js来运行指定js文件

配置npm脚本，在package.js里的scripts里,

'webpack':'webpack --config webpack.config.js --progress -dsiplay-module --colors --

display-reason'

然后在命令行里运行npm run webpack,就会运行这段脚本

webpack单页面，entry里是一个入口文件，如果是多个页面，得用对象的形式传入多个入口文件

{
  entry: {
       app:'./src/app.js',
       search: './src/search.js'
  },
  output: {
       filename:'{name}.js',//'[name]-[hash].js'//[chunkhash]
       path:__dirname+'./built'，
       publicPath: 'http://cdn.com/'//js连接前就会加上这个地址，线上地址
}
}

webpack插件

上下文概念：在module.exports里会有一个默认属性：context为整个运行环境上下文，默认值为根目录

npm install html-webpack-plugin --save-dev

var htmlWebpackPlugin = require('html-webpack-plugin')

mudule.exports = {

plugins：【

new htmlWebpackPlugin({

template:'index.html',

filename:'index-[index-[hash].html'//这里可以指定生成index文件

inject:'head'//制定脚本放在head还是body标签里

title:'webpack is good'//文件标题

date: new Date()，