Webpack のピットへの旅 (5) vue 単一ファイルの読み込みcomponent_html/css_WEB-ITnose

何が必要ですか?

これまでの 4 つの演習を終えて、webapck についてある程度理解できたと思います。次に、webpack についての理解をさらに進めるための包括的なケースに進みます。

まず、.vue タイプのファイルを解析するにはどのようなものが必要かを考える必要がありますか?どのような手順に従う必要がありますか?このプロジェクトをどのように構築すればよいでしょうか?

スタート

ステップ 1: プロジェクト ディレクトリを初期化します

次のディレクトリとフォルダーを作成する必要があります。最終的なディレクトリ構造は次のとおりです:

- dist //文件生成目录    -- //自动生成- node_module //自动安装    -- ...- src //文件入口    -- components //组件存放        -- app.vue //主.vue    -- main.js //主.js- index.html //主.html- package.json //npm 配置- webpack.cofig.js // webpack配置

ステップ 2: プロジェクトの依存関係をインストールします

.json ファイルの場合は、npm init を直接使用して package.json ファイルの構成を初期化できます。

React、coffce などの他のファイルをコンパイルしたい場合は、対応する多くのローダーをロードする必要があります。 .vue ファイルをロードしたい。もちろん同じことです。

npm install xxx-loader --save-dev のようなコマンドを使用して 1 つずつ入力することをお勧めします。コマンド ラインには、Webpack の依存関係管理関係を理解するのに役立つプロンプトが表示されます。私の設定リストは次のとおりです:

実際のプロジェクトでは、内部の設定の意味を誰もが理解しやすくするために、コメントを使用して以下を直接ロードします。

{    "name": "05-five-vue", //项目名称    "version": "1.0.0", //版本    "description": "vue+webapck", //描述    "main": "index.js", //主文件    "scripts": {        "test": "echo \"Error: no test specified\" && exit 1",        "start": "webpack-dev-server --inline"    }, //scripts指定了运行脚本命令的npm命令行缩写，比如这是的start指定了运行npm run start时，所要执行的命令。    "dependencies": { //项目依赖        "vue": "^1.0.18"    },    "devDependencies": { //各种各样的loader，用来解析想相应的文件格式。要解析vue并且完成相应的功能，这些基本都是必须的。        "autoprefixer-loader": "^2.0.0",        "babel": "^6.3.13",        "babel-core": "^6.3.21",        "babel-loader": "^6.2.0",        "babel-plugin-transform-runtime": "^6.3.13",        "babel-preset-es2015": "^6.3.13",        "babel-runtime": "^5.8.34",        "css-loader": "^0.16.0",        "file-loader": "^0.8.5",        "html-loader": "^0.3.0",        "node-sass": "^3.4.2",        "sass-loader": "^3.2.0",        "style-loader": "^0.12.3",        "url-loader": "^0.5.6",        "vue-html-loader": "^1.2.0",        "vue-loader": "^7.2.0",        "webpack": "^1.12.0",        "webpack-dev-server": "^1.14.0"    },    "author": "guowenfh", //作者    "license": "MIT", //开源协议    "keywords": [ //关键字        "vue",        "webpack"    ]}

トラブルを避けたい場合は、上記の devDependency フィールドと依存関係フィールドを直接コピーして、package.json ファイルに入力してください。次に、npm install を実行して、すべてのモジュールと依存関係を自動的にインストールします。

ステップ 3: webpack を設定する

ファイルがセットアップされました。次は、webpack.config.js を設定する重要なステップです。リストは次のとおりです:

var path = require('path');// NodeJS中的Path对象，用于处理目录的对象，提高开发效率。// 模块导入module.exports = {    // 入口文件地址，不需要写完，会自动查找    entry: './src/main',    // 输出    output: {        path: path.join(__dirname, './dist'),        // 文件地址，使用绝对路径形式        filename: '[name].js',        //[name]这里是webpack提供的根据路口文件自动生成的名字        publicPath: '/dist/'        // 公共文件生成的地址    },    // 服务器配置相关，自动刷新!    devServer: {        historyApiFallback: true,        hot: false,        inline: true,        grogress: true,    },    // 加载器    module: {        // 加载器        loaders: [        // 解析.vue文件            { test: /\.vue$/, loader: 'vue' },        // 转化ES6的语法            { test: /\.js$/, loader: 'babel', exclude: /node_modules/ },        // 编译css并自动添加css前缀            { test: /\.css$/, loader: 'style!css!autoprefixer'},        //.scss 文件想要编译，scss就需要这些东西！来编译处理        //install css-loader style-loader sass-loader node-sass --save-dev            { test: /\.scss$/, loader: 'style!css!sass?sourceMap'},        // 图片转化，小于8K自动转化为base64的编码            { test: /\.(png|jpg|gif)$/, loader: 'url-loader?limit=8192'},        //html模板编译？            { test: /\.(html|tpl)$/, loader: 'html-loader' },        ]    },    // .vue的配置。需要单独出来配置    vue: {        loaders: {            css: 'style!css!autoprefixer',            html:'html-loader'        }    },    // 转化成es5的语法    babel: {        presets: ['es2015'],        plugins: ['transform-runtime']    },    resolve: {        // require时省略的扩展名，如：require('module') 不需要module.js        extensions: ['', '.js', '.vue'],        // 别名，可以直接使用别名来代表设定的路径以及其他        alias: {            filter: path.join(__dirname, './src/filters'),            components: path.join(__dirname, './src/components')        }    },    // 开启source-map，webpack有多种source-map，在官网文档可以查到    devtool: 'eval-source-map'};

ここで設定を詳しく確認してください。ここでの構成は非常に単純です。プロジェクトでは、エントリ ファイルと出力ファイルをさらに詳細にカスタマイズできます。

そして、ここで生成された css ファイルも js に挿入されることがあります。このとき、webpack プラグインが使用されます。 (私はまだ使用したことがなく、テストしていませんし、面倒ではないようです。可能であれば、次の記事で試してみます)

ステップ 4: コードを書く

次のステップでは、表示するファイルを作成します。コードを直接貼り付けます。

index.html:

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>webpack vue</title>    <style> #app { margin: 20px auto; width: 800px; height: 600px; } </style></head><body>    <div id="app"></div>    <script src="dist/main.js"></script></body></html>

main.js の内容は次のとおりです:

//es6语法：import Vue from "../node_modules/vue/dist/vue.min.js";//其实不用写完，会自动查找。//外部引入别的库都可以用这样的方式，比如jquery等。。//引入我们编写的测试用vue文件。import app from './components/app';Vue.config.debug = true;//开启错误提示new Vue(app);

app.vue は次のとおりです:

<script> //es6 export default { el:"#app", //data:function(){}，下面是es6写法 data () { return { name:"guowenfh", age:"2q1" } } }</script><template>    <div>        <h1>姓名：{{name}}</h1>        <h2>{{age}}</h2>    </div></template><style lang="sass"> /*测试一下对sass的编译*/ $qwe:#098; body{ background-color: $qwe; h1{ background-color: #eee; color: red; transform: translate(10%, 10%); } h1:hover{ height:100px; } h2{ background-color: #999; } }</style>

ステップ 5: 自動更新設定を変更する

自動更新の実装については別途説明します。 まず、前のブログの自動更新の実装に問題があることを説明する必要があります。色を変更するには CSS スタイルのみを変更できます。 HTML のコンテンツが変更されても、ブラウザは自動的に更新されません。

注 1:

まず、package.json の scripts フィールドに "start": "webpack-dev-server --inline" が表示されます。オンラインの方法に従って後で --hot を追加した場合、app.vue の