webpack2 0簡單配置教程

以前習慣用gulp+less來開發專案，由於公司專案用的vue開發的，所以學下webpack這個打包工具。以下是我學習時的筆記，希望給在webpack配置過程中遇到麻煩的朋友一絲幫助。

目前只配置了sass,css,js,html,es6,編譯，字型引入，熱載入這幾項，簡單專案已經夠用。

如果深入webpack可以配置很多，原諒我也只是初次配置

1.首先建乙個自己的專案資料夾，npm init -y快速生成乙個配置檔案

2. npm i webpack -d   本地安裝webpack 

3. npm i webpack-dev-server -g   全域性安裝webpack-dev-server

4. npm i webpack-dev-server -d 新增到package.json檔案裡

5.以下是我的package.json，裡面的包都是常用的

,

"author": "",
"license": "isc",
"devdependencies": 
}

// html壓縮

var htmlwebpackplugin = require('html-webpack-plugin');
// js css分離
var extracttextplugin = require('extract-text-webpack-plugin');
var path = require('path')
var webpack = require('webpack')
module.exports = ,
// 配置輸出路徑
output: ,
// loader模組配置
module: ,
// css 檔案)},
//解析.scss檔案)},
// 字型
,// }]
},// 外掛程式配置
plugins: [
new htmlwebpackplugin(),
new extracttextplugin(*/
})],
// webpack-dev-server 熱載入
devserver: ,
devtool: '#eval-source-map'
}

}]

]}

doctype html

>
<
html 
lang
="en"
>
<
head
>
<
meta 
charset
="utf-8"
>
<
title
>document
title
>
<
link 
rel="stylesheet"
type
="text/css"
href
="dist/styls.css"
>
<
script 
src="dist/build.js"
>
script
>
head
>
<
body
>
<
h1>hello
h1>
<
h2>hello
h2>
<
p>hello <
span
>hello world
span
>
p>
body
>
html
>

main.js裡面移入所有需要打包的檔案

import  from './script/hello1';

import  from './script/hello';
import './style/hello.css';
import './style/hello.scss';

我託管到了github,有興趣的同學可以參考下:

webpack 簡單配置

const extracttextplugin require extract text webpack plugin 打包的css拆分,將一部分抽離出來 const webpack require webpack 引入的webpack,使用lodash const htmlwebpackplugi...

webpack的那些簡單配置

這是webpack的配置檔案的樣式，簡單介紹一下專案中的實現，就是在專案中新增webpack的引用，然後再專案中新增webpack.con.js檔案，然後就是配置了 小知識 元件 element控制項也挺好使得，可以嘗試一下！use strict const path require path co...

webpack的簡單配置 jQuery

需要根目錄webpack.config.js src index.js src indxe.html 打包使用了外掛程式html就會掛載輸出在根目錄下面 雖然看不見但是存在 替換vue配置在這一期 dependencies devdependencies babelrc檔案內容 如下是webpack...