webstorm+webpack創建項目
阿新 • • 發佈：2017-06-28
get 配置 ace star fill cli ports replace plugin
http://blog.csdn.net/mafan121/article/details/71211922
1.使用webstrom創建一個空的項目
2.在項目下創建文件夾和文件
a.創建css文件夾存放index.css文件，文件內容如下：
[css] view plain copy print?
- p{
- font-size: 24px;
- padding:0 100px;
- color:blue;
- }
- p:nth-of-type(2) {
- font-size: 30px;
- text-align: center;
- color:black;
- font-family:"幼圓";
- }
- p:nth-of-type(3) {
- color: red;
- font-weight:bold;
- text-align: right;
- }
b.創建index文件夾，存放index.html文件，文件內容如下：
[javascript] view plain copy print?
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>myFirstDemo</title>
- </head>
- <body>
- <div id="app"></div>
- <script src="bundle.js"></script>
- </body>
- </html>
c.創建data文件夾存放index.json文件，文件內容如下：
[javascript] view plain copy print?
- {
- "name":"hello webpack",
- "content":"this is my first demo",
- "start":"Ready Go!"
- }
d.創建jsproject文件夾存放createdom.js和entry.js文件。
entry.js
[javascript] view plain copy print?
- require(‘./../css/index.css‘);
- var createdom = require(‘./createdom.js‘);
- document.getElementById(‘app‘).appendChild(createdom());
createdom.js
[javascript] view plain copy print?
- var message=require(‘./../data/index.json‘);
- module.exports = function() {
- var greet=document.createElement(‘div‘);
- greet.innerHTML="<p>"+message.name+"</p>"+"<p>"+message.content+"</p>"+"<p>"+message.start+"</p>";
- return greet;
- };
3.命令操作
在webstorm的Terminal窗口執行如下命令：
a.生成依賴文件package.json(默認會在根目錄下生成)
cnpm init
b.依次安裝相關依賴（安裝後項目根目錄下會出現node_modules文件夾，下面包含下載的依賴）
(1)cnpm intsall webpack -g
(2)cnpm install --save-dev webpack
(3)cnpm install --save-dev css-loader
(4)cnpm install --save-dev style-loader
(5)cnpm install --save-dev json-loader
(6)cnpm install --save-dev webpack-dev-server
4.配置webpack.config.js文件
在項目根路徑下創建webpack.config.js文件，文件內容為：
[javascript] view plain copy print?
- var webpack = require(‘webpack‘);
- module.exports = {
- //2、進出口文件配置
- entry:__dirname+‘/jsproject/entry.js‘,//指定的入口文件,“__dirname”是node.js中的一個全局變量，它指向當前執行腳本所在的目錄
- output: {//輸出
- path: __dirname+‘/index‘,//輸出路徑
- filename: ‘bundle.js‘//輸出文件名
- },
- module: {//在配置文件裏添加加載器說明，指明每種文件需要什麽加載器處理
- loaders: [
- {//json加載器
- test: /\.json$/,
- loader: "json-loader"//註意-loader不能省略，網上說能省略，經測試編譯會報錯
- },
- {//5、編譯es6配置
- test:/\.js$/,
- exclude:/node_modules/,
- loader:‘babel-loader‘,//在webpack的module部分的loaders裏進行配置即可
- query:{
- presets:[‘es2015‘,‘react‘]
- }
- },
- {//3、CSS-loader
- test:/\.css$/,
- loader:‘style-loader!css-loader‘//添加對樣式表的處理
- }
- ]
- },
- //4、服務器依賴包配置
- devServer: {//註意：網上很多都有colors屬性，但是實際上的webpack2.x已經不支持該屬性了
- contentBase: "./index",//本地服務器所加載的頁面所在的目錄
- historyApiFallback: true,//不跳轉
- inline: true//實時刷新
- //hot：true,//不要書寫該屬性，否則瀏覽器無法自動更新
- //publicPath："/asses/",//設置該屬性後，webpack-dev-server會相對於該路徑
- },
- plugins:[]//插件
- }
此時的文件目錄為：
5.啟動服務
在Terminal中輸入：
webpack
執行完成後，輸入：
webpack-dev-server
然後在瀏覽器中輸入：http://localhost:8080/
此時可以看到效果了，而且更新代碼。瀏覽器也會實時刷新。
webstorm+webpack創建項目