起步
创建目录：
getstart
>src
index.js
index.html
基本安装
npm init -y
npm install --save-dev webpack@3.8.1
npm install --save jquery@3.2.1
生成
package.json文件，-y可省去一些设置生成
node_modules文件夹，同时package.json中会有"webpack": "^3.8.1"下载
jQuery后面的index.js中会用到，可以用到再下载
此时目录为：
getstart
>node_modules
>src
index.js
index.html
package-lock.json
package.json
修改下目录：
getstart
>dist
index.html
>node_modules
>src
index.js
package-lock.json
package.json
删除外面的index.html，添加一个dist文件夹，里面放置index.html
这里dist文件夹下的文件为展示页面用的代码
写代码
//index.html
<html>
<head>
<title>Getting Start</title>
</head>
<body>
<script src="bundle.js"></script>
</body>
</html>
-------------------------------------------
//index.js
var $ = require('jquery') //基本写法
// import $ from 'jquery' Es6写法
$('body').append($('<div>hello</div>'))
bundle.js是整理过后的js文件
index.html中此时还没有bundle.js，看下面操作
创建一个 bundle 文件
./node_modules/.bin/webpack src/index.js dist/bundle.js
这条语句用来，生成bundle.js文件
问题：假如文件很多，这种写法太过复杂，所以我们需要配置下路径
添加webpack.config.js配置文件
解决上述复杂的路径书写问题
getstart
>dist
index.html
>node_modules
>src
index.js
package-lock.json
package.json
webpack.config.js
在getstart目录下，添加webpack.config.js文件
编辑内容：
//webpack.config.js
const path = require('path')
module.exports = {
entry: './src/index/js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
}
}
提示：如果没有命名为webpack.config.js而是webpack.js，那么命令行就要是：./node_modules/.bin/webpack --config=webpack.js
此时要编辑bundle.js只需要命令行：
./node_modules/.bin/webpack
再写一个carousel.js练手
getstart
>dist
index.html
>node_modules
>src
index.js
carousel.js ----- +
package-lock.json
package.json
webpack.config.js
//carousel.js
var carousel = {
init: function(){
console.log('carousel init...')
}
}
module.exports = carousel //类似 CommonJS 规范写法
// export {carousel} Es6 模块导出 写法
---------------------------------------------------
//index.js
var $ = require('jquery') //基本写法
// import $ from 'jquery' Es6写法
$('body').append($('<div>hello aaa</div>'))
//let carousel = require('./carousel')
import carousel from './carousel'
//import {carousel} from './carousel' -----Es6
carousel.init()
打开控制台，看看console.log()是否输出成功
不过还是要通过./node_modules/.bin/webpack来生成新的dist，看看可以怎么解决
NPM 脚本
//package.json
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "./node_modules/.bin/webpack" //也可以直接是 webpack
},
试试命令行：
npm run build
资源管理
加载 CSS
在module配置中 安装并添加style-loader和css-loader
npm install --save-dev style-loader css-loader
webpack.config.js
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
},
+ module: {
+ rules: [
+ {
+ test: /\.css$/,
+ use: [
+ 'style-loader',
+ 'css-loader'
+ ]
+ }
+ ]
+ }
};
修改下目录
getstart
>dist
index.html
>node_modules
>src
>components
carousel.js
carousel.css
index.js
package-lock.json
package.json
webpack.config.js
写代码
//carousel.js
import $ from 'jquery'
import './carousel.css'
var carousel = {
init(){
console.log('carousel init... 000')
this.render()
},
render(){
$('body').append($('<div id="carousel">我是轮播</div>'))
}
}
// module.exports = carousel
export {carousel}
---------------------------------------------------------------
//carousel.css
#carousel {
color: red;
}
这里引入carousel.css文件：import './carousel.css'
注意：export {carousel}用Es6书写，不然可能报错
npm run build 看看页面上有没有效果
加载图片
安装file-loader
npm install --save-dev file-loader
配置webpack.config.js
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
},
module: {
rules: [
{
test: /\.css$/,
use: [
'style-loader',
'css-loader'
]
},
+ {
+ test: /\.(png|svg|jpg|gif)$/,
+ use: [
+ 'file-loader'
+ ]
+ }
]
}
};
使用background引入图片
//carousel.css
#carousel {
width: 300px;
height: 300px;
color: red;
background: url(./cat1.jpg) center center no-repeat;
background-size: cover;
opacity: 0.8;
}
img 引入图片资源
//carousel.js
import $ from 'jquery'
import './carousel.css'
import cat1 from './cat1.jpg'
var carousel = {
init(){
console.log('carousel init... 000')
this.render()
},
render(){
$('body').append($(`<div id="carousel">我是轮播</div>`))
$('#carousel').append($(`<div><img src="${cat1}"><div>`))
}
}
// module.exports = carousel
export {carousel}
先引入图片资源：import cat1 from './cat1.jpg'，后缀名要写
${cat1}表示图片的地址
注意：使用Es6的写法：``
