标签：cti font cnpm 模块 webp logs char htm rip
废话不多说，直接走实战！！！
1、桌面新建一个文件夹：webpack_test
2、在webpack_test文件夹下面新建一个文件夹demo01
3、然后又在demo01文件夹下面建立两个js文件main.js和index.js文件
4、在index.js中写一个函数并导出
//声明一个函数并用export导出 export function add(a, b) { console.log (a + b); }
5、在main.js中导入index.js中的函数，并调用
import {add} from ‘./index.js‘
add(3, 5);
add(78, 100);
6、再在根目录webpack_test下创建一个文件index.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>我学习webpack</title> </head> <body> </body> </html>
7、然后在根目录webpack_test下新建一个webpack.config.js的文件，并写配置规则
const path = require(‘path‘) const HtmlWebpackPlugin = require(‘html-webpack-plugin‘) config = { entry: { main:‘./demo01/main.js‘ }, output: { path: path.resolve(__dirname, ‘dist‘) //指定出口文件的路径 filename: ‘[name].js‘ //这是一个上面背景颜色一样的 Chunk name，也可以指定出口路径如规定 ‘./[name].js‘出口就会在js这个文件夹下 }, module: { rules: [ { test: /\.js$/, exclude: /node_modules/, loader: ‘babel-loader‘ } ] }, plugins: [ new HtmlWebpackPlugin({ filename: ‘index_webpack.html‘, template: ‘index.html‘ }) ] } module.exports = config
8、在终端安装各种包
npm init 初始化一下
cnpm install webpack --save-dev 下载webpack模块
cnpm install babel-loader 这个包允许使用 Babel 和 Webpack 转换JavaScript文件
cnpm install babel-core 解释js的文件
html-webpack-plugin 下载所需要的插件
9、然后使用webpack编译一下即可,打开的时候去dis目录下打开index_webpack.html
标签：cti font cnpm 模块 webp logs char htm rip
原文地址：http://www.cnblogs.com/tenro/p/7745113.html
